摘要：項(xiàng)目中遇到切換列表，每個(gè)都需要分頁的需求，分頁流程具有相似性，于是想將分頁封裝為組件，方便應(yīng)用。組件的復(fù)用完成了以上組件，在對其他分頁的頁面，可以直接復(fù)用。

項(xiàng)目中遇到 tab切換列表，每個(gè)tab都需要分頁的需求，分頁流程具有相似性，于是想將分頁封裝為組件，方便應(yīng)用。

組件的應(yīng)用已寫成一個(gè)小demo，效果如下圖所示（數(shù)據(jù)用mock模擬）：

源碼可以查看：wxapp-pagination

具體項(xiàng)目需求：

查看自己相關(guān)的會(huì)議（頁面命名為 meetings）

tab切換，分為：

“我的會(huì)議”（我參加的會(huì)議，后面會(huì)以 "join" 為 key區(qū)分）

“我的預(yù)約”（我預(yù)約的會(huì)議，后面會(huì)以 "book" 為 key區(qū)分）

一次加載10條（size=10），拉到底部后，加載下一頁（page = page +1）

當(dāng)然，作為前端，要考慮性能方面的需求：

首次只加載默認(rèn)tab頁的首頁，其他tab等到點(diǎn)擊到對應(yīng)tab才開始加載。

回到已加載過的tab頁，保留原數(shù)據(jù)不重新加載。

所以原型圖大概就長這樣：

與分頁邏輯相關(guān)的項(xiàng)目結(jié)構(gòu)如下：

├── components
│        ├── meeting-item      # 列表item
│        └── pagination            # 分頁組件
├── model
│   └── user.js                    # 我的相關(guān) model
└── pages
│       └── user                        # 我的相關(guān)頁面
│       ├── meetings        # 我的會(huì)議（就是tab要分頁的頁面啦）
│       └── ...
│
└── vant-weapp

還是用圖理一下他們之間的關(guān)系吧：

觸發(fā)分頁的事件是滾動(dòng)到頁面的底部，小程序中，觸發(fā)該事件是Page頁面的onReachBottom事件，但是這個(gè)事件只能在Page中觸發(fā)，所以要將這個(gè)觸發(fā)時(shí)機(jī)傳遞給pagination組件。

解決思路是：組件?pagination 內(nèi)，設(shè)置key屬性，每當(dāng)onReachBottom事件觸發(fā)之后，設(shè)置組件屬性 key? 為一個(gè)隨機(jī)字符串，當(dāng)組件?pagination?監(jiān)聽到key的變化的時(shí)候，做出分頁操作。

// components/pagination/index.js
Component({
  properties: {
    key: {
      type: String,
      observer: "_loadMoreData"  // _loadMoreData 為分頁操作
    }
  }
})

Page({
  onReachBottom(){
    const key = scene[+this.data.currentTab].key // 對應(yīng)tab對應(yīng)key
    this.setData({
      [key]: random(16)
    })
  }
})

觸發(fā)到達(dá)底部之后，需要加載數(shù)據(jù)。但再加載之前，先滿足加載的條件：

上一頁還未加載完成（loading = true），不重復(fù)加載

當(dāng)前頁面全部加載完（ended = true），不繼續(xù)加載

具體加載流程為：

page：觸發(fā) onReachBottom 事件，修改 pagination組件 key 值

component：?key值監(jiān)聽到變化，觸發(fā)加載事件?_loadMoreData

component： _loadMoreData 中判斷滿足條件后，觸發(fā)加載列表函數(shù) this.triggerEvent("getList")，并傳入頁面參數(shù)page 和 size。

page：向model層獲取數(shù)據(jù)。

page：獲取數(shù)據(jù)后，傳遞給 pagination組件list和total 值。

component：list 監(jiān)聽到變化，判斷是否加載完成。

// components/pagination/index.js
Component({
  properties: {
    name: String,
    key: {
      type: String,
      observer: "_loadMoreData"  // _loadMoreData 為分頁操作
    },
    size: {  // 每次加載條目數(shù)
      type: Number,
      value: 10
    },
    total: Number, // 頁面總數(shù)
    list: {                 // 已加載條目
      type: Array,
      observer: "_endState"     // 每次加載完新數(shù)據(jù)，判斷數(shù)據(jù)是否全部加載完成
    }
  },

  data: {
    page: 0,                // 當(dāng)前第幾頁
    loading: false, // 是否正在加載
    ended: false    // 數(shù)據(jù)是否已全部加載完成
  },
  
  methods: {
    _loadMoreData(){
      const { loading, ended, size } = this.data
      if (loading) return  // 上一頁還未加載完成，不加載
      if (ended) return    // 當(dāng)前頁面全部加載完，不加載
      const page = this.data.page + 1

      this.setData({
        loading: true,  // 開始加載新頁面loading設(shè)置為true
        page
      })
      // 觸發(fā)加載下一頁，并傳入?yún)?shù)
      this.triggerEvent("getList", {
        page,
        size
      })
    },
    _endState(val, oldVal) {
      const { total, list } = this.properties
      let ended = false
      // 判斷數(shù)據(jù)是否全部加載完成
      if (list.length >= total) {
        ended = true
      }
      this.setData({
        loading: false, // 當(dāng)前頁面加載完成，loading設(shè)置為false
        ended
      })
    }
  }
})

pagination組件獲取了可循環(huán)的列表，初始想法是循環(huán)slot，但是在slot中卻獲取不到 item 對象：

解決的辦法是將每個(gè)列表項(xiàng)封裝為組件，循環(huán)抽象節(jié)點(diǎn)，這樣對其他頁面的分頁具有可拓展性。

componentGenerics?字段中聲明：

// components/pagination/index.json
{
  "componentGenerics": {
    "selectable": true
  },
  // ...
}

使用抽象節(jié)點(diǎn)：

指定“selectable”具體是哪個(gè)組件：

對應(yīng) json 文件定義對應(yīng)?usingComponents?：

// pages/user/meetings/index.json
{
  "usingComponents": {
    "pagination":"/components/pagination/index",
    "meeting-item":"/components/meeting-item/index"
  }
}

meeting-item 組件接收一個(gè)屬性 item，這樣在?meeting-item 組件中，就可以獲取到循環(huán)列表的item值，并正常繪制頁面。

給pagination添加initImmediately屬性，當(dāng)initImmediately為true時(shí)，首次加載頁面，并用變量?initState標(biāo)記是否已經(jīng)初始化頁面過。

// components/pagination/index.js
Component({
  properties: {
    initImmediately: {
      type: Boolean,
      value: true,
      observer: function(val){
        if (val && !this.data.initState) {
          this.initData()
        }
      }
    },
    // ...
  },
  data: {
     initState: false, // 是否已經(jīng)加載過
     // ...
  },
  lifetimes: {
    attached: function () {
      if (this.data.initImmediately){
        this.initData()
      }
    },
  },
  methods: {
    initData(){
      console.info(`${this.data.name}:start init data`)
      this._loadMoreData()
      this.setData({
        initState: true
      })   
      },
    // ... 
      _endState(val, oldVal) {
      if (!this.data.initState) return 
      // ...
      },
  }
})

當(dāng)currentTab為當(dāng)前類型的時(shí)候，initImmediately 設(shè)置為 true。

完成了以上組件，在對其他分頁的頁面，可以直接復(fù)用。比如，實(shí)現(xiàn)一個(gè)獲取全部用戶列表的分頁，只需要新增一個(gè)user-item的組件，像這樣調(diào)用：

具體應(yīng)用可以查看我寫的小demo：wxapp-pagination。