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

先來看一下效果圖：

分頁效果圖

場景概述：

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

思考邏輯拆分

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

初始化只有1頁

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

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

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

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

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

在當前的列表中移動

5.點擊上一頁的時候需要對當前5個頁面列表更新，不需要從新請求數(shù)據因為都已經請求過，還要考慮第四點

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

DOM結構書寫

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

DOM結構

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

方法實現(xiàn)

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

a.初始定義屬性默認值

定義默認值

b.首次加載頁面初始化

初始化數(shù)據

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

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

PageList用來存儲所有的頁面列表，同時用來更新顯示的5個頁面，所以需要構造當前的5個頁面按鈕，所以需要方法currentPages

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

即這種情況

c.點擊上一頁和下一頁操作

操作方法

根據arrowDirection的值來判斷是進行上一頁還是下一頁的操作。每次點擊的時候先更新currentPage的值（data-屬性存儲的）

1.下一頁的操作

如果當前currenPage在當前的頁面列表中，點擊下一頁只需要更換當前的pageData即可

當前是4，下一頁在列表中

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

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

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

2.上一頁的操作

因為“上一頁“數(shù)據均屬于已經存在的狀態(tài)，所以不涉及請求，只會設計變更列表和頁面數(shù)據。開頭的思路中已經說明

d.點擊類別頁面的方法changePage

變更數(shù)據即可

不足之處的思考

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

1.不應該靠currentPage這個屬性來控制這么多的DOM元素的顯示

2.因為是一次一次的請求數(shù)據，不能知道一共有多少數(shù)據和記錄尾頁，只能開最后一次請求時發(fā)現(xiàn)沒有數(shù)據，給出提示，最好的方式應該是在請求最后一次之前能知道下一次沒有數(shù)據。

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

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

思考與總結

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論