微信小程序 擴展組件·小程序長列表組件

recycle-view

小程序長列表組件

使用此組件需要依賴小程序基礎(chǔ)庫 2.2.2 版本，同時依賴開發(fā)者工具的 npm 構(gòu)建。具體詳情可查閱官方 npm 文檔。

背景

?目前小程序會有不少的應(yīng)用場景里會用到無限長列表的交互，當一個頁面展示很多信息的時候，會造成小程序頁面的卡頓以及白屏。原因有如下幾點：

1. 列表數(shù)據(jù)很大，首次 setData 的時候耗時高
2. 渲染出來的列表 DOM 結(jié)構(gòu)多，每次 setData 都需要創(chuàng)建新的虛擬樹、和舊樹 diff 操作耗時都比較高
3. 渲染出來的列表 DOM 結(jié)構(gòu)多，占用的內(nèi)存高，造成頁面被系統(tǒng)回收的概率變大。

因此就有長列表組件來解決這些問題。

實現(xiàn)思路

?核心的思路是只渲染顯示在屏幕的數(shù)據(jù)，基本實現(xiàn)就是監(jiān)聽 scroll 事件，并且重新計算需要渲染的數(shù)據(jù)，不需要渲染的數(shù)據(jù)留一個空的 div 占位元素。

假設(shè)列表數(shù)據(jù)有100個 item，知道了滾動的位置，怎么知道哪些 item 必須顯示在頁面？因為 item 還沒渲染出來，不能通過 getComputedStyle 等 DOM 操作得到每個 item 的位置，所以無法知道哪些 item 需要渲染。為了解決這個問題，需要每個 item 固定寬高。item 的寬高的定義見下面的 API 的createRecycleContext()的參數(shù) itemSize 的介紹。

滾動過程中，重新渲染數(shù)據(jù)的同時，需要設(shè)置當前數(shù)據(jù)的前后的 div 占位元素高度，同時是指在同一個渲染周期內(nèi)。頁面渲染是通過 setData 觸發(fā)的，列表數(shù)據(jù)和 div 占位高度在2個組件內(nèi)進行 setData 的，為了把這2個 setData 放在同一個渲染周期，用了一個 hack 方法，所以定義 recycle-view 的 batch 屬性固定為 batch="{{batchSetRecycleData}}"。

在滾動過程中，為了避免頻繁出現(xiàn)白屏，會多渲染當前屏幕的前后2個屏幕的內(nèi)容。

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

長列表組件由2個自定義組件 recycle-view、recycle-item 和一組 API 組成，對應(yīng)的代碼結(jié)構(gòu)如下

├── miniprogram-recycle-view/
    └── recycle-view 組件
    └── recycle-item 組件
    └── index.js

包結(jié)構(gòu)詳細描述如下：

使用方法：

1.安裝組件

npm install --save miniprogram-recycle-view

2.在頁面的 json 配置文件中添加 recycle-view 和 recycle-item 自定義組件的配置

{
  "usingComponents": {
    "recycle-view": "miniprogram-recycle-view/recycle-view",
    "recycle-item": "miniprogram-recycle-view/recycle-item"
  }
}

3.WXML 文件中引用 recycle-view

<recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
  <view slot="before">長列表前面的內(nèi)容</view>
  <recycle-item wx:for="{{recycleList}}" wx:key="id">
    <view>
        <image style='width:80px;height:80px;float:left;' src="{{item.image_url}}"></image>
      {{item.idx+1}}. {{item.title}}
    </view>
  </recycle-item>
  <view slot="after">長列表后面的內(nèi)容</view>
</recycle-view>

recycle-view 的屬性介紹如下：

recycle-view 包含3個 slot，具體介紹如下：

長列表的內(nèi)容實際是在一個 scroll-view 滾動區(qū)域里面的，當長列表里面的內(nèi)容，不止是單獨的一個列表的時候，例如我們頁面底部都會有一個 copyright 的聲明，我們就可以把這部分的內(nèi)容放在 before 和 after 這2個 slot 里面。

recycle-item 的介紹如下：

需要注意的是，recycle-item 中必須定義 wx:for 列表循環(huán)，不應(yīng)該通過 setData 來設(shè)置 wx:for 綁定的變量，而是通過createRecycleContext方法創(chuàng)建RecycleContext對象來管理數(shù)據(jù)，createRecycleContext在 index.js 文件里面定義。建議同時設(shè)置 wx:key，以提升列表的渲染性能。

4.頁面 JS 管理 recycle-view 的數(shù)據(jù)

const createRecycleContext = require('miniprogram-recycle-view')
Page({
    onReady: function() {
        var ctx = createRecycleContext({
          id: 'recycleId',
          dataKey: 'recycleList',
          page: this,
          itemSize: { // 這個參數(shù)也可以直接傳下面定義的this.itemSizeFunc函數(shù)
            width: 162,
            height: 182
          }
        })
        ctx.append(newList)
        // ctx.update(beginIndex, list)
        // ctx.destroy()
    },
    itemSizeFunc: function (item, idx) {
        return {
            width: 162,
            height: 182
        }
    }
})

頁面必須通過 Component 構(gòu)造器定義，頁面引入了miniprogram-recycle-view包之后，會在 wx 對象下面新增接口createRecycleContext函數(shù)創(chuàng)建RecycleContext對象來管理 recycle-view 定義的的數(shù)據(jù)，createRecycleContext接收類型為1個 Object 的參數(shù)，Object 參數(shù)的每一個 key 的介紹如下：

RecycleContext 對象提供的方法有：

其中 itemSize 的使用

itemSize可以為包含{width, height}的Object，所有數(shù)據(jù)只有一種寬高信息。如果有多種，則可以提供一個函數(shù)，長列表組件會調(diào)用這個函數(shù)生成每條數(shù)據(jù)的寬高信息，如下所示：

function(item, index) {
    return {
        width: 195,
        height: item.azFirst ? 130 : 120
    }
}

提示：

1. recycle-view設(shè)置batch屬性的值必須為{{batchSetRecycleData}}。
2. recycle-item的寬高必須和itemSize設(shè)置的寬高一致，否則會出現(xiàn)跳動的bug。
3. recycle-view設(shè)置的高度必須和其style里面設(shè)置的樣式一致。
4. createRecycleContext(options)的id參數(shù)必須和recycle-view的id屬性一致，dataKey參數(shù)必須和recycle-item的wx:for綁定的變量名一致。
5. 不能在recycle-item里面使用wx:for的index變量作為索引值的，請使用{{item._index_}}替代。
6. 不要通過setData設(shè)置recycle-item的wx:for的變量值，建議recycle-item設(shè)置wx:key屬性。
7. 如果長列表里面包含圖片，必須保證圖片資源是有HTTP緩存的，否則在滾動過程中會發(fā)起很多的圖片請求。
8. 有些數(shù)據(jù)不一定會渲染出來，使用wx.createSelectorQuery的時候有可能會失效，可使用RecycleContext的getBoundingClientRect來替代。
9. 當使用了useInPage參數(shù)的時候，必須在Page里面定義onPageScroll事件。
10. transformRpx會進行四舍五入，所以transformRpx(20) + transformRpx(90)不一定等于transformRpx(110)
11. 如果一個頁面有多個長列表，必須多設(shè)置batch-key屬性，每個的batch-key的值和batch屬性的變量必須不一致。例如

<recycle-view batch="{{batchSetRecycleData}}" batch-key="batchSetRecycleData"></recycle-view>
<recycle-view batch="{{batchSetRecycleData1}}" batch-key="batchSetRecycleData1"></recycle-view>