雖然項(xiàng)目大多數(shù)的分頁(yè)都是在后端做，但有些業(yè)務(wù)場(chǎng)景不適合在后端做分頁(yè)，就需要前端的小??愛(ài)們?nèi)?shí)現(xiàn)。

效果

jR7kFWUY1b.gif

實(shí)現(xiàn)思路

data：源數(shù)據(jù)
curPage：當(dāng)前頁(yè)（最好從0頁(yè)開(kāi)始）
pageSize：一頁(yè)展示的數(shù)據(jù)
total：數(shù)據(jù)總條數(shù)

以上信息都已知后，利用數(shù)組方法slice，截取當(dāng)前頁(yè)需要展示的數(shù)據(jù)。（以下方法，如果最后一頁(yè)切換結(jié)束后，直接回到第一頁(yè)）

代碼展示

/**
     * setCurrentPageData 前端分頁(yè)
     * @param {*} data 源數(shù)據(jù)
     * @param {*} curPage 當(dāng)前頁(yè)
     * @param {*} curPageSize
     * @param {*} total 總頁(yè)碼
     */
    setCurrentPageData(data, curPage, pageSize, total) {
      let dataList;
      let begin = curPage * pageSize; // 數(shù)組截取開(kāi)始位置 exp: curPage  = 1， pageSize= 2，則截取位置從下標(biāo)為2的數(shù)據(jù)開(kāi)始截取
      let last = (total - curPage) * pageSize; // exp: 總記錄13條時(shí)，剩下1條
      if (parseInt(total) === curPage) {
        if (last > 0) { // 這個(gè)判斷必須要有，防止最后一頁(yè)數(shù)據(jù)剛好等于pageSize，會(huì)出現(xiàn)一頁(yè)空白頁(yè)
          dataList = data.slice(begin, begin + last);
        }
      } else {
        dataList = data.slice(begin, begin + pageSize);
      }
      return dataList;
    },

方法調(diào)用

    /**
     * curList 分頁(yè)后數(shù)據(jù)
     */
     let res = this.curList(data, curPage,pageSize,total);