小程式列表懶載入的實現方式

2022-04-01 19:01:06

小程式上的列表懶載入

長列表我們經常接觸到，長列表為什麼需要懶載入呢，因為一旦渲染內容多了，渲染引擎就需要更多的時間去渲染畫面，這時可能會出現頁面白屏、卡頓等。而使用者其實只需要看到視窗內的內容就可以了，不用一次性把全部內容渲染完，所以可以通過懶載入實現。

分頁載入

常見的列表懶載入是和後端一起實現，也就是分頁載入。前端請求第幾頁的資料，後端就返回第幾頁的資料。前端要實現的互動就是當用戶滑動到頁面底部時，就要請求下一頁的資料。

用scroll事件監聽

高度示意圖

監聽scroll事件，事件回撥會有當前元素的捲動距離scrollTop，當scrollTop+screenHeight等於捲動高度scrollHeight時，表示已經滑動到底部。

在小程式中，Page物件提供onReachBottomapi

onReachBottom: function() {
  // 頁面觸底時執行
},

用IntersectionObserver監聽

用捲動監聽會非常耗效能，捲動時頻繁觸發回撥的，所以會不斷去計算判斷。比較好的優化方案是IntersectionObserverAPI，當IntersectionObserver監聽的元素與可視區有相交狀態時，就會產生回撥，這樣就減少了觸發的頻率

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // 相交區域佔目標節點的佈局區域的比例，不等於0時表示有相交
      res.intersectionRect // 相交區域
      res.intersectionRect.left // 相交區域的左邊界座標
      res.intersectionRect.top // 相交區域的上邊界座標
      res.intersectionRect.width // 相交區域的寬度
      res.intersectionRect.height // 相交區域的高度
    })
  }
})

前端分頁渲染

上面說的都是前端結合介面的分頁載入。假如說介面沒有分頁，直接就返回了龐大的資料列表。前端如果直接就setData所有資料，會渲染很久，其實複雜的列表渲染20條的時候就已經很慢了。這個時候需要對已經獲取到的資料進行分頁，分批進行渲染。

通過右側面板可以看到，一開始沒有渲染所有節點，在滑動頁面過程中節點再不斷增加。

直接上程式碼

<!-- pages/first/index.wxml -->
<view class="container">
  <block wx:for="{{goodsList}}" wx:key="index" wx:for-item="subItemList">
    <block wx:for="{{subItemList}}" wx:key="name">
      <view class="item">{{item.name}}</view>
    </block>
  </block>
</view>

goodsList是一個二維陣列，用wx:for雙重遍歷

// pages/first/index.js
const list = Array.from({length: 5}, (item, index) => {
  return Array.from({length: Math.ceil(Math.random()*10 + 5)}, (subItem, subIndex) => {
    return {name: `第${index+1}屏, 第${subIndex+1}個`}
  })
})
/**
生成的list是一個二維陣列
[
  [{}, {}],
  [{}, {}],
  [{}, {}],
  ...
]
**/

Page({
  data: {
    goodsList: [],
    lazyloadIdx: 0
  },
  onLoad() {
    this.setData({
      goodsList: [list[0]],
      lazyloadIdx: 1
    })
  },
  // 滑動到底部時往goodsList新增資料
  onReachBottom () {
    console.log('onReachBottom');
    let { lazyloadIdx } = this.data
    if (lazyloadIdx >= list.length) return
    this.setData({
      [`goodsList[${lazyloadIdx}]`]: list[lazyloadIdx],
      lazyloadIdx: lazyloadIdx+1
    })
  }
})

每次只setData一屏資料，既減少了setData資料量，又減少渲染時間

用IntersectionObserver代替onReachBottom

有很多場景用不了onReachBottom，那我們只能用IntersectionObserver代替。優化一下上面的程式碼

# pages/second/index.wxml
<view class="container">
  <block wx:for="{{goodsList}}" wx:key="index" wx:for-item="subItemList">
    <block wx:for="{{subItemList}}" wx:key="name">
      <view class="item">{{item.name}}</view>
    </block>
  </block>
+  <view id="observer" class="bottom"></view>
</view>

增加節點用來監聽

//  pages/second/index.js
let lazyloadOb = null
Page({
  data: {
    goodsList: [],
    lazyloadIdx: 0
  },
  onLoad() {
    this.setData({
      goodsList: [list[0]],
      lazyloadIdx: 1
    })
    this.initObserver()
  },
  onunload () {
    this.disconnenct()
  },
  lazyloadNext () {
    console.log('lazyloadNext');
    let { lazyloadIdx } = this.data
    if (lazyloadIdx >= list.length) return
    this.setData({
      [`goodsList[${lazyloadIdx}]`]: list[lazyloadIdx],
      lazyloadIdx: lazyloadIdx+1
    })
  },
  initObserver () {
    lazyloadOb = wx.createIntersectionObserver().relativeToViewport({ bottom: 50 }).observe('#observer', (res) => {
      console.log('res.intersectionRatio', res.intersectionRatio);
      // 觸發回撥時載入下一屏
      if (res.intersectionRatio) this.lazyloadNext()
    })
  },
  disconnenct() {
    lazyloadOb.disconnenct()
  }
})

加需求！

後端返回的商品列表只是一個一維陣列，需要前端轉為二維陣列，現在需要每屏的列表長度為5。

假設商品列表個數為21，那麼會生成二維陣列對應的子項長度：

// 虛擬碼
[5, 5, 5, 5, 1]

我們可以設定分頁大小pageSize為5，當前分頁pageNum，然後list.slice(pageNum, pageSize)就能擷取對應的資料，再加入到二維陣列中。

但是產品來加需求了，商品列表預設只展示非售罄商品+一個售罄商品，其餘售罄商品要點選【檢視更多】按鈕才展示

假設非售罄商品有16個，售罄11個，每屏的列表長度還是5，那麼：

[
  5, 5, 5,    // 非售罄
  2,          // 非售罄+售罄
  5, 5        // 售罄
]

只有兩個的長度不大適合再分一屏，所以小於5時，直接跟前面的合併

[
  5, 5, 7, // 非售罄+一個售罄
  5, 5     // 售罄
]

這個時候設定pageSize就沒法滿足了，所以要根據售罄個數，非售罄個數以及一屏長度，算出長度陣列，再算出對應的二維陣列

/**
  * @desc 生成商品列表的子項長度
  * 展示列表包含售罄的，在非售罄列表最後拼接一個售罄商品，點選展開再載入售罄
  * 
  * @param {number} onSaleLen 非售罄長度
  * @param {number} soldOutLen 售罄長度
  * @returns { { subSize: Array<number>; soldOutLen: number } }
  */
genSubListSize (onSaleLen, soldOutLen) {
  // 有售罄的時候，放一項售罄到非售罄那邊去
  if (soldOutLen) {
    soldOutLen-= 1
    onSaleLen+=1
  }
  const arr = []
  const lazyloadListPartLength = 5 // 一屏5個
  let firstSize = 0
  if (onSaleLen < lazyloadListPartLength*2) {
    firstSize = onSaleLen
    onSaleLen = 0
  } else {
    firstSize = lazyloadListPartLength
    onSaleLen -= lazyloadListPartLength
  }
  arr.push(firstSize)
  
  // 子項長度
  const size = lazyloadListPartLength
  const remainder = onSaleLen % size
  arr.push(
    ...Array.from({length: Math.floor(onSaleLen/size) - 1}, () => size),
  )
  if (onSaleLen) {
    arr.push(onSaleLen <= size ? onSaleLen : size + remainder)
  }
  // 記錄此時售罄項的索引，因為要點選展開才能載入售罄列表
  const soldOutIndex = arr.length
  if (soldOutLen) {
    const remainder = soldOutLen % size
    arr.push(
      ...Array.from({length: Math.floor(soldOutLen/size) - 1}, () => size), 
      soldOutLen <= size ? soldOutLen : size + remainder
    )
  }

  console.log('genSubListSize', arr)
  
  return {
    subSize: arr,
    soldOutLen,
    soldOutIndex
  }
}
/**
  * eg: onSaleLen = 25; soldOutLen = 9; size = 5
  * return [5, 5, 5, 5, 6, 8]
  * eg: onSaleLen = 15; soldOutLen = 9; size = 5
  * return [5, 5, 6, 8]
  * eg: onSaleLen = 10; soldOutLen = 10; size = 5
  * return [5, 6, 9]
  * eg: onSaleLen = 14; soldOutLen = 10; size = 5
  * return [5, 5, 5, 9]
  * eg: onSaleLen = 8; soldOutLen = 9; size = 5
  * return [9, 8]
  * eg: onSaleLen = 2; soldOutLen = 10; size = 7 像這種小於非售罄小於size的，只能取到3了
  * return [3, 9]
**/

現在取列表長度為20，12個非售罄，8個售罄，一屏5個

// pages/third/index
const goodsList = Array.from({length: 20}, (item, index) => {
  return {name: `第${index+1}個`, soldOut: index < 12 ? false : true}
})
Page({
  // ...
  onLoad() {
    this.initObserver()
    this.handleGoodsList()
  },
  handleGoodsList () {
    const { onSaleLen, soldOutLen } = this.countSaleLen()
    console.log('onSaleLen', onSaleLen, 'soldOutLen', soldOutLen);
    const {
      subSize,
      soldOutLen: soldOutLength,
      soldOutIndex
    } = this.genSubListSize(onSaleLen, soldOutLen)
    const renderList = this.genRenderList(subSize)
    console.log('renderList', renderList);
  },
  countSaleLen () {
    const soldOutIndex = goodsList.findIndex(good => good.soldOut)
    if (soldOutIndex === -1) {
      return {
        onSaleLen: goodsList.length,
        soldOutLen: 0
      }
    }
    return {
      onSaleLen: soldOutIndex,
      soldOutLen: goodsList.length - soldOutIndex
    }
  },
  // 根據分組陣列生成渲染列表
  genRenderList (subSize) {
    const before = goodsList
    const after = []
    let subList = [] // 二維陣列子項
    let subLen = 0 // 子項長度
    let splitSizeArrIdx = 0 // 長度陣列索引
    for (let i = 0; i < before.length; i++) {
      if (subLen === subSize[splitSizeArrIdx]) {
        splitSizeArrIdx++
        after.push(subList)
        subList = []
        subLen = 0
      }
      before[i]['part'] = `第${splitSizeArrIdx+1}屏`
      subList.push(before[i])
      subLen++
    }
    // 最後一個子項新增進去
    after.push(subList)
    return after
  }
})

列印一下renderList，得到了動態切分的資料了