基于Bootstrap仿淘寶分頁控件實(shí)現(xiàn)

發(fā)布時(shí)間：2016年11月07日作者：文章轉(zhuǎn)自網(wǎng)絡(luò)，版權(quán)歸原作者所有，反饋可立刻刪除 (該文來自筆記，點(diǎn)擊查看原文)

大家都應(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è)置來除去這一部分

想一想，對(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)值

分類導(dǎo)航

基于Bootstrap仿淘寶分頁控件實(shí)現(xiàn)

延伸閱讀

我想了解如何學(xué)習(xí)