MVVM框架下實(shí)現(xiàn)分頁功能示例

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

先來看一下效果圖：

分頁效果圖

場景概述：

當(dāng)前頁面需要加載 10條數(shù)據(jù) ，每次點(diǎn)擊下一頁如果之前沒有請求過接口需要請求數(shù)據(jù)，如果在一次頁面會話中， 請求過的數(shù)據(jù)不再從新請求，且要保留每一頁面的操作結(jié)果 （比如在頁面中對數(shù)據(jù)做的一些操作：點(diǎn)擊事情等），且不知道一共有多少數(shù)據(jù)。

思考邏輯拆分

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

初始化只有1頁

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

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

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

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

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

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

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

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

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

以上的思路理清楚之后，就可以開始動手寫代碼了，先來書寫DOM結(jié)構(gòu)吧。

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

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

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

現(xiàn)在思路清晰，頁面所涉及的方法也理清了，開始來寫方法吧！

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

定義默認(rèn)值

b.首次加載頁面初始化

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

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

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

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

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

即這種情況

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

操作方法

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

1.下一頁的操作

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

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

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

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

請求數(shù)據(jù)變更數(shù)據(jù)

2.上一頁的操作

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

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

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

不足之處的思考

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

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

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

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

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

思考與總結(jié)

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。