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

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

大家都應(yīng)該上過淘寶的吧，沒有上過淘寶的同學估計也沒幾個了，但是我相信大多數(shù)的人都是在淘寶上面買完東西就下線，很少有人會關(guān)注淘寶上的設(shè)計這類的，但是對于普通人這樣還行，但是對于一個程序員這樣就可不行了，因為博主本人是從事前端方面的工作，所以就通過仿照淘寶的設(shè)計樣式，以求在技能上面能夠有一個大的突破

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

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

1、比如拓展部分感覺比較偏小了一點，以我個人的體驗上來說不是挺好

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

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

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

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

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

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

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

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

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

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

分類導航

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

延伸閱讀

我想了解如何學習