大家都應(yīng)該上過淘寶的吧，沒有上過淘寶的同學(xué)估計(jì)也沒幾個(gè)了，但是我相信大多數(shù)的人都是在淘寶上面買完東西就下線，很少有人會(huì)關(guān)注淘寶上的設(shè)計(jì)這類的，但是對(duì)于普通人這樣還行，但是對(duì)于一個(gè)程序員這樣就可不行了，因?yàn)椴┲鞅救耸菑氖虑岸朔矫娴墓ぷ?，所以就通過仿照淘寶的設(shè)計(jì)樣式，以求在技能上面能夠有一個(gè)大的突破

一、淘寶分頁控件了解

先上一張?zhí)詫毜姆猪搱D片：

根據(jù)上圖中對(duì)淘寶分頁控件的分析，我們大致上可以將淘寶分頁控件分成兩部分，一部分是核心部分，這一部分主要就是一個(gè)分頁的核心功能，這個(gè)功能同時(shí)也是也是不可或缺的，還有一部分是拓展部分，這一部分是相當(dāng)于增加一些功能來增強(qiáng)和改善用戶體驗(yàn)的，但是在很多現(xiàn)成的分頁控件是沒有實(shí)現(xiàn)的(這個(gè)也是一個(gè)自己造輪子的理由之一)。但是依據(jù)我對(duì)淘寶分頁控件的理解再結(jié)合工作上面的需求分析，我認(rèn)為淘寶的分頁控件要改成具有普適性的業(yè)務(wù)功能控件還需要有這些改動(dòng)：

1、比如拓展部分感覺比較偏小了一點(diǎn)，以我個(gè)人的體驗(yàn)上來說不是挺好

2、由于淘寶的寶貝比較多，所以只需要顯示到一百頁就行了，但是在實(shí)際的項(xiàng)目中我們可能沒有100頁，所以我們需要顯示到最后一頁的頁數(shù)就行了

3、由于拓展部分不是必須的，只是可以增強(qiáng)用戶體驗(yàn)，但是有些時(shí)候頁面給分頁預(yù)留的位置不夠，這個(gè)時(shí)候我們就可以通過設(shè)置來除去這一部分

二、基于bootstrap的仿淘寶分頁控件輸入?yún)?shù)設(shè)定

想一想，對(duì)于普通的分頁控件，我們需要什么元素：pageNo(當(dāng)前頁)，pageSize(每頁渲染個(gè)數(shù))，count(總數(shù)),這幾個(gè)控件是必不可少的，pageNo主要是用來標(biāo)識(shí)要渲染第幾頁為當(dāng)前頁，pageSize和count主要是用來計(jì)算出要渲染的頁數(shù)(pageCount)，pageCount的實(shí)現(xiàn)邏輯如下：

var pageCount=0;
if(count%pageSize==0){
pageCount=count/pageSize;
}esle{
pageCount=count/pageSize+1;
}

這樣我們就能保證了pageCount為我們所要渲染的最終的頁數(shù)，除了這個(gè)基礎(chǔ)配置還有一些其他的配置我認(rèn)為也是需要增加的

1、增加對(duì)最后一個(gè)確定按鈕的名稱修改，這個(gè)可能在我們的業(yè)務(wù)中不叫確定而叫修改之類的名稱，所以如果有一個(gè)可以修改的功能，那么也方便了業(yè)務(wù)的拓展（default:"確定"）

2、主色調(diào)修改，我們知道像淘寶的分頁控件采用的是橙黃色的主色調(diào)，然后如果是按照經(jīng)典的bootstrap的配色方案來看，是采用淺藍(lán)色的，所以這個(gè)也要支持修改(default:lightblue)

3、支持showNum的配置，showNum指的是當(dāng)pageNo=1的時(shí)候要顯示的頁數(shù)，例如淘寶的分頁控件顯示的是1到5頁外加一個(gè)省略號(hào)。所以showNum=5，表示顯示5頁;(default:6)

4、支持skipPart，這一部分指的就是分頁控件的拓展部分，這部分我們應(yīng)該要按照需求來決定是否顯示（default:true）

* 括號(hào)內(nèi)為參數(shù)的默認(rèn)值

三、基于bootstrap仿淘寶插件設(shè)計(jì)思路

根據(jù)對(duì)淘寶網(wǎng)站的觀察，以及對(duì)對(duì)其設(shè)計(jì)上面的思考，我認(rèn)為大致上的插件設(shè)計(jì)思路如下：

第一步，接收用戶的傳入?yún)?shù)

第二步，將用戶的部分傳入?yún)?shù)傳遞給一個(gè)分頁算法，然后通過分頁算法將一些最終要渲染的結(jié)果通過JSON的形式返回出來

第三步，對(duì)JSON數(shù)據(jù)進(jìn)行渲染使其最終生成分頁控件

這樣的設(shè)計(jì)主要是符合軟件工程的高內(nèi)聚、低耦合的設(shè)計(jì)思想，通過這個(gè)設(shè)計(jì)即使分頁算法的實(shí)現(xiàn)相對(duì)的困難，但是我們卻把分頁的渲染與算法的實(shí)現(xiàn)分離開來，有利于后期功能的拓展，提高了組件的可維護(hù)性。

四、分頁算法的設(shè)計(jì)

其實(shí)這一塊的分頁算法頁說不上設(shè)計(jì)，純粹的就是模仿吧，模范淘寶的分頁規(guī)則，在默認(rèn)的情況下，我們會(huì)分成這樣的四種情況(以淘寶為例)

1、pageNo為1-5頁的時(shí)候，將pageNo的當(dāng)前頁改變?yōu)辄c(diǎn)擊的頁數(shù)

2、當(dāng)pageNo為6,7頁的時(shí)候，增加渲染1到當(dāng)前頁+1，例如選的是6頁的話，那么我們就渲染1~7頁

3、接著我們判斷pageNo是否大于等于pageCount(當(dāng)前頁)-showNum，如果是的話，也就是說明到了最后的那幾頁了，那么我們這個(gè)時(shí)候就要直接渲染最后的showNum頁，并把pageNo點(diǎn)亮

4、最后的一種情況：除了上面提到的這些情況，剩下的我們都是通過渲染pageNo的前2頁和pagNo的后兩頁，還有就是渲染第一頁和第二頁。

接下來就來分享一下我在分頁算法上面的設(shè)計(jì)：

//分頁算法邏輯，主要對(duì)分頁進(jìn)行邏輯運(yùn)算，不做渲染，返回值為JSON
function PageAlgorithm(pageNo,pageSize,count,showNum){
var data="";
if(pageNo==1){
data='{"algorithm":[{"text":"上一頁","num":0,"status":"disabled"}';
}else{
data='{"algorithm":[{"text":"上一頁","num":"'+(pageNo-1)+'","status":"abled"}';
}
//判斷分頁類型
if(count>showNum){
if(pageNo<=showNum+2){
//判斷pageNo是否在要初始化顯示的頁碼內(nèi)
if(pageNo<=showNum){
for(var i=1;i<=showNum;i++){
if(pageNo==i){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
} 
}
if(pageNo==showNum){
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}else{
for(var i=1;i<=pageNo;i++){
if(i==pageNo){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
if(pageNo!=count){
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
//選中最后一頁時(shí)，將省略號(hào)隱藏
if(pageNo!=count){
if(pageNo!=(count-1)){
data+=',{"text":"…","num":"more","status":""}';
}
}
}else if(pageNo>count-showNum){
data+=',{"text":"1","num":"1","status":"abled"}';
data+=',{"text":"2","num":"2","status":"abled"}';
data+=',{"text":"…","num":"more","status":"disabled"}';
for(var i=count-showNum+1;i<=count;i++){
if(pageNo==i){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
}
else{
data+=',{"text":"1","num":"1","status":"abled"}';
data+=',{"text":"2","num":"2","status":"abled"}';
data+=',{"text":"…","num":"more","status":"disabled"}';
for(var i=pageNo-2;i<=pageNo+2;i++){
if(i==pageNo){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
data+=',{"text":"…","num":"more","status":"disabled"}';
}
}else{ 
for(var i=1;i<=count;i++){
if(pageNo==i){
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}';
}else{
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}';
}
}
}
if(pageNo==count){
data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"disabled"}]}';
}else{
data+=',{"text":"下一頁","num":"'+(pageNo+1)+'","status":"abled"}]}';
}
var json_return = JSON.parse(data);
return json_return;
}

注：不必關(guān)注里面的JSON最終要呈現(xiàn)的格式，主要的原因是這些參數(shù)最終是要傳遞到下一個(gè)方法中去渲染分頁控件，而這些相當(dāng)于是在兩個(gè)方法中約定的，我們主要要關(guān)注的是怎樣對(duì)分頁控件進(jìn)行類型上的區(qū)別，從而渲染出不同的JSON數(shù)據(jù)

五、jPage.js插件說明

這一款插件就是本次教程的一個(gè)最終的產(chǎn)物，這一款插件在實(shí)現(xiàn)方案上面是仿照淘寶的邏輯，但是由于公司的主營(yíng)業(yè)務(wù)與淘寶的業(yè)務(wù)上面有些區(qū)別，所以樣式風(fēng)格不太一致。但是也是能夠很好的滿足一般業(yè)務(wù)上面常見的需求。

具體怎么使用，我們來舉個(gè)例子

我們要得到這樣的一個(gè)分頁控件，總數(shù)據(jù)為70條，每頁顯示3條數(shù)據(jù)，并且要顯示拓展部分，我們只需要如下這樣去調(diào)用就行了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" > 
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="jPage.js"></script>
<script type="text/javascript">
$("#test").page({count:70,pageSize:3,skipPart:true});
</script>
</body>
</html>

最終的效果如下：

這個(gè)簡(jiǎn)單吧大家。接下來福利來了，這款插件是開源的，不用998，免費(fèi)帶回家(要的請(qǐng)往下看)。

六、插件下載

由于篇幅有限，所以插件的更多用法沒法在文中體現(xiàn)，但是為了各位同學(xué)可以更好的學(xué)習(xí)使用這一款插件，在這里為大家提供了比較詳細(xì)的文檔說明。并且下載的版本相當(dāng)于1.0版本。后期如果時(shí)間允許的話會(huì)對(duì)這款插件做一個(gè)持續(xù)的版本迭代。下載地址，如果覺得好的話，請(qǐng)為這個(gè)插件點(diǎn)贊。

以上所述是小編給大家介紹的基于Bootstrap仿淘寶分頁控件實(shí)現(xiàn)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論