分頁(yè)這種組件，幾乎每一種框架都有這樣的組件，近期我們做了新的項(xiàng)目，因?yàn)槭窃谛碌姆种Ш托碌捻?xiàng)目中開(kāi)發(fā)的一期任務(wù)，屬于什么都沒(méi)有的狀態(tài)，幾乎所有的效果和業(yè)務(wù)邏輯都需要重新整理和書(shū)寫(xiě)，項(xiàng)目正好完結(jié)了，把其中用到的一些小方法分想出來(lái)，重在分享思路和邏輯，理清思路和邏輯不論是哪一種框架，都可以輕松搞定

先來(lái)看一下效果圖：

分頁(yè)效果圖

場(chǎng)景概述：

當(dāng)前頁(yè)面需要加載 10條數(shù)據(jù) ，每次點(diǎn)擊下一頁(yè)如果之前沒(méi)有請(qǐng)求過(guò)接口需要請(qǐng)求數(shù)據(jù)，如果在一次頁(yè)面會(huì)話中， 請(qǐng)求過(guò)的數(shù)據(jù)不再?gòu)男抡?qǐng)求，且要保留每一頁(yè)面的操作結(jié)果 （比如在頁(yè)面中對(duì)數(shù)據(jù)做的一些操作：點(diǎn)擊事情等），且不知道一共有多少數(shù)據(jù)。

思考邏輯拆分

1.頁(yè)面初次加載出數(shù)據(jù)的時(shí)候，需要對(duì)視圖層和分頁(yè)功能做初始化，如果第一次加載的數(shù)據(jù)不足 10條 ，證明沒(méi)有后續(xù)頁(yè)面，所以也就不用顯示分頁(yè)功能，如果等于10條則證明有下一頁(yè)。

初始化只有1頁(yè)

2.考慮頁(yè)面列表顯示幾個(gè)：此處設(shè)定為 5個(gè) ，且這個(gè)列表要隨著點(diǎn)擊上一頁(yè)，下一頁(yè)而動(dòng)態(tài)更新

頁(yè)面變化的列表有5條數(shù)據(jù)

3.需要一個(gè) currentPage 作為索引來(lái)顯示當(dāng)前所在頁(yè)面的下標(biāo)，以及依靠索引做操作，同時(shí)還要記錄一個(gè)總的頁(yè)面數(shù)據(jù)列表 pageList ，還需要一個(gè)可以動(dòng)態(tài)更新的顯示列表，就是當(dāng)前看到的5個(gè)列表數(shù)據(jù) newPages

3.頁(yè)面數(shù)量隨著請(qǐng)求不斷增加，需要把這些頁(yè)面中的視圖層顯示數(shù)據(jù)存儲(chǔ)起來(lái)，用于顯示和記錄數(shù)據(jù) Objectives

4.已經(jīng)請(qǐng)求過(guò)得數(shù)據(jù)不需要每次都請(qǐng)求，如果在當(dāng)前的頁(yè)面列表中移動(dòng)， 不需要?jiǎng)討B(tài)更新 頁(yè)面列表，只需要改變currentPage和對(duì)應(yīng)的當(dāng)前頁(yè)面數(shù)據(jù)

在當(dāng)前的列表中移動(dòng)

5.點(diǎn)擊上一頁(yè)的時(shí)候需要對(duì)當(dāng)前5個(gè)頁(yè)面列表更新，不需要從新請(qǐng)求數(shù)據(jù)因?yàn)槎家呀?jīng)請(qǐng)求過(guò)，還要考慮第四點(diǎn)

6.點(diǎn)擊下一頁(yè)的時(shí)候，如果沒(méi)有請(qǐng)求過(guò)，也就是下一頁(yè)的下標(biāo)， 大于總的數(shù)據(jù)長(zhǎng)度 的時(shí)候需要從新請(qǐng)求數(shù)據(jù)，請(qǐng)求下來(lái)后需要對(duì)整個(gè)頁(yè)面列表數(shù)據(jù)（存儲(chǔ)的所有頁(yè)面數(shù)據(jù)，所有的頁(yè)面?zhèn)€數(shù)列表，當(dāng)前要顯示的5個(gè)列表）做 整體的更新 。如果下一頁(yè)小于等于總的數(shù)據(jù)長(zhǎng)度，則只需要當(dāng)前5個(gè)頁(yè)面列表更新，和此頁(yè)的對(duì)應(yīng)數(shù)據(jù)，還要考慮第四點(diǎn)情況

DOM結(jié)構(gòu)書(shū)寫(xiě)

以上的思路理清楚之后，就可以開(kāi)始動(dòng)手寫(xiě)代碼了，先來(lái)書(shū)寫(xiě)DOM結(jié)構(gòu)吧。

DOM結(jié)構(gòu)

來(lái)講講這段代碼的意思吧，我們用屬性currentPage的值來(lái)控制當(dāng)前這些元素的顯示與否。用newPages的長(zhǎng)度來(lái)控制頁(yè)面動(dòng)態(tài)顯示的列表。同時(shí)用了2個(gè)方法來(lái)進(jìn)行操作，changPage這個(gè)方法用來(lái)改變當(dāng)前頁(yè)面的視圖層顯示數(shù)據(jù)，arrowPage 方法用了進(jìn)行上一頁(yè)和下一頁(yè)的操作，方法相同，參數(shù)不同。再看一下每一項(xiàng)中都有一個(gè)data屬性用了存儲(chǔ)一個(gè)page的值，這個(gè)值是用來(lái)設(shè)置currentPage和顯示頁(yè)面數(shù)據(jù)用的。

方法實(shí)現(xiàn)

現(xiàn)在思路清晰，頁(yè)面所涉及的方法也理清了，開(kāi)始來(lái)寫(xiě)方法吧！

a.初始定義屬性默認(rèn)值

定義默認(rèn)值

b.首次加載頁(yè)面初始化

初始化數(shù)據(jù)

如果首次請(qǐng)求的數(shù)據(jù)小于10條，則默認(rèn)的currentPage還是0，也不需要顯示分頁(yè)功能。如果符合條件，則需要初始化currentPage為1，同時(shí)需要執(zhí)行一個(gè)構(gòu)造分頁(yè)列表的方法buildPageList

首次要實(shí)現(xiàn)的功能

PageList用來(lái)存儲(chǔ)所有的頁(yè)面列表，同時(shí)用來(lái)更新顯示的5個(gè)頁(yè)面，所以需要構(gòu)造當(dāng)前的5個(gè)頁(yè)面按鈕，所以需要方法currentPages

如果pageList小于5個(gè)時(shí)候則newPages與它相同，不需要做其他處理。下面的情況一會(huì)再講

即這種情況

c.點(diǎn)擊上一頁(yè)和下一頁(yè)操作

操作方法

根據(jù)arrowDirection的值來(lái)判斷是進(jìn)行上一頁(yè)還是下一頁(yè)的操作。每次點(diǎn)擊的時(shí)候先更新currentPage的值（data-屬性存儲(chǔ)的）

1.下一頁(yè)的操作

如果當(dāng)前currenPage在當(dāng)前的頁(yè)面列表中，點(diǎn)擊下一頁(yè)只需要更換當(dāng)前的pageData即可

當(dāng)前是4，下一頁(yè)在列表中

如果下一頁(yè)不在當(dāng)前列表中，但是小于pageList的長(zhǎng)度，則需要變更當(dāng)前顯示的5個(gè)page列表，和更換當(dāng)前的pageData，這個(gè)時(shí)候回到之前的currentPages方法中來(lái)變更當(dāng)前的newPages。

如果下一頁(yè)不在當(dāng)前列表中，并且大于pageList的長(zhǎng)度。則請(qǐng)求新的數(shù)據(jù)，變更列表

請(qǐng)求數(shù)據(jù)變更數(shù)據(jù)

2.上一頁(yè)的操作

因?yàn)椤吧弦豁?yè)“數(shù)據(jù)均屬于已經(jīng)存在的狀態(tài)，所以不涉及請(qǐng)求，只會(huì)設(shè)計(jì)變更列表和頁(yè)面數(shù)據(jù)。開(kāi)頭的思路中已經(jīng)說(shuō)明

d.點(diǎn)擊類(lèi)別頁(yè)面的方法changePage

變更數(shù)據(jù)即可

不足之處的思考

方法已經(jīng)書(shū)寫(xiě)完畢了，思考一圈之后肯定能發(fā)現(xiàn)有很多不足之處吧，是的的確存在一些不足之處。

1.不應(yīng)該靠currentPage這個(gè)屬性來(lái)控制這么多的DOM元素的顯示

2.因?yàn)槭且淮我淮蔚恼?qǐng)求數(shù)據(jù)，不能知道一共有多少數(shù)據(jù)和記錄尾頁(yè)，只能開(kāi)最后一次請(qǐng)求時(shí)發(fā)現(xiàn)沒(méi)有數(shù)據(jù)，給出提示，最好的方式應(yīng)該是在請(qǐng)求最后一次之前能知道下一次沒(méi)有數(shù)據(jù)。

3.有一些地方用了固定的數(shù)字來(lái)做處理，這樣日后如果產(chǎn)品要改成顯示10個(gè)頁(yè)的列表呢？就得挨個(gè)改數(shù)字，所以最好用一個(gè)熟悉值來(lái)控制

對(duì)?。。](méi)有給出完整的實(shí)例和代碼。是的，寫(xiě)出來(lái)分享思路和基本方法，目的就是希望看到的人能和我交流思路和方法，給出更好的建議，而不是用來(lái)讓別人復(fù)制粘貼的，這樣毫無(wú)意義。

思考與總結(jié)

到這里所有的思路和方法都已經(jīng)結(jié)合的講解完畢，基本的代碼也都分析全面，基于上面的方法和思想，來(lái)寫(xiě)一個(gè)適合你們項(xiàng)目框架的分頁(yè)功能吧，最好能把它封裝成一個(gè)組件，但是如果由于接口給的數(shù)據(jù)方式不同或者需求不同，功能實(shí)現(xiàn)起來(lái)可能會(huì)大相徑庭，但是基本的思路和方法可以學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。