目錄

• 前言
  
• 分析
• 初始渲染方法
  
• 初步優化
  
• 進一步優化
  
• 方法二
  

前言

大部分小程式都會有這樣的需求，頁面有長列表，需要下拉到底時請求後臺資料，一直渲染資料，當資料列表長時，會發現明顯的卡頓，頁面白屏閃頓現象。

分析

• 請求後臺資料，需要不斷的setData，不斷的合併資料，導致後期資料渲染過大
• 渲染的DOM 結構多，每次渲染都會進行dom比較，相關的diff演算法比較耗時都大
• DOM數目多，佔用的記憶體大，造成頁面卡頓白屏

初始渲染方法

/*
 * @Descripttion: 
 * @version: 
 * @Author: shijuwang
 * @Date: 2021-07-14 16:40:22
 * @LastEditors: shijuwang
 * @LastEditTime: 2021-07-14 17:10:13
 */
//Page Object
Page({
  data: {
    list: [],// 所有資料
  },//options(Object)
  onLoad: function (options) {
    this.index = 0
    const arr = [
      {
        idx: this.index++
      },{
        idx: this.index++
      },]
    this.setData({ list: arr })
  },onReachBottom: function () {
    const arr = [
      {
        idx: this.index++
      },]
    let { list } = this.data
    this.setData({
      list: [...list,...arr]
    })
  },});


// wxml 
<view class="container">
    <view class="item-list" wx:for="{{list}}">
      <text class="">
          {{item.idx}}
      </text>
    </view>
</view>

每次觸底重新請求資料，合併陣列並重新setData，列表負責時，會出現卡頓白屏，每次setData的資料越來越大，增加了通訊時間，也渲染了過多的dom元素，如下圖：

初步優化

1.將一維陣列改為二位陣列

• 通常情況下，setData是進行了全部的資料重新渲染
• 分頁請求，對伺服器壓力相對較小，分頁增量渲染對setData壓力也小
• setData對二維陣列查詢對應索引的那條資料的下標，用 setData 進行區域性重新整理
• setData的時候，只是將當前這一螢幕的資料賦值

// wxml
<view class="container">
  <block wx:for="{{list}}" wx:for-index="pageNuma">
    <view class="item-list" wx:for="{{item}}">
      <text class="">{{item.idx}}</text>
    </view>
  </block>
</view>
// wx.
Page({
  data: {
    list: [],//options(Object)
  onLoad: function (options) {
    this.index = 0;
    this.currentIndex = 0;          // 當前頁數 pageNuma
    const arr = [
      {
        idx: this.index++
      },]
    this.setData({ [`list[${this.currentIndex}]`]: arr })
  },onReachBottom: function () {
    gXlbNAw
 
this.currentIndex++;            // 觸底+1
    const arr = [
      {
        idx: this.index++
      }, {
        idx: this.index++
      },]
    this.setData({
      [`list[${this.currentIndex}]`]: arr
    })
  },});

這樣我們就可以看到，整個渲染是以屏為分頁來渲染，請求幾個pageNum，那麼就渲染幾屏，沒屏裡再進行沒個列表渲染。

進一步優化

2我們可以只渲染可視區域的一屏、或者渲染可視區域附近的幾屏，其他區域用view佔位，不進行具體渲染，從而減少dom渲染，減少節點過多造成的問題。

做這一步的話需要拆分以下幾步:

• 獲取當前螢幕高度、渲染時獲取每屏高度、滾動距離計算
• 儲存獲取到的全部渲染資料、儲存每屏高度、通過onPageScroll計算可視區域處於那一屏
• 除了可視區域其他區域資料為空，用view佔位

    is.currentIndex = 0;           // 當前頁數 pageNum
    this.pageHeight = [];            // 每屏高度儲存
    this.allList = [];               // 獲取到的所有資料
    this.systemHeight = 0;           // 螢幕高度
    this.visualIndex = [];           // 儲存可視區域pageNum

進入頁面時，掛載相關資料：

 // wxml
 <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}">
    <view class="item-list" wx:for="{{item}}">
      <text class="">{{item.idx}}</text>
    </view>
  </view>
 onLoad: function (options) {
    this.index = 0;
    this.currentIndex = 0;           // 當前頁數 pageNum
    this.pageHeight = [];            // 每屏高度儲存
    this.allList = [];               // 獲取到的所有資料
    this.systemHeight = 0;           // 螢幕高度
    const arr = [
      {
        idx: this.index++
      },{
        idx: this.index++
      }
    ]
    this.setData({ [`list[${this.currentIndex}]`]: arr },() => {

      this.setPageHeight();
    });
    this.getSystemInfo();
  },

給每一屏的view動態的設定id名字，方便在渲染時獲取每屏高度，並進行儲存，為後續不在可視區域佔位設定高度使用
迴圈pageHeight，相加每個分頁高度和當前滾動距離進行比較,獲取到當前渲染的pageNum，然後把當前選渲染的pageNum -+1，上一螢幕和下一螢幕放入陣列中，當前三個分頁資料展示，其他螢幕的資料進行view佔位，高度為儲存高度。

   // 滾動距離計算
  onPageScroll: throttle(function (e) {
    let pageScrollTop = e[0].scrollTop;  
    let that = this;
    // 滾動計算現在處於那一個分頁的屏
    let scrollTop = 0;
    let currentIndex = this.currentIndex;

    for (var i = 0; i < this.pageHeight.length; i++) {
      scrollTop = scrollTop + this.pageHeight[i];

      if (scrollTop > pageScrollTop + this.systemHeight - 50) {
        this.currentIndex = i;
        this.visualIndex = [i - 1,i,i + 1];
        that.setData({
          visualIndex: this.visualIndex
        })
        break;
      }
    }
  },200)

實時監控滾動，做節流優化處理

const throttle = (fn,interval) => {
  var enterTime = 0; //觸發的時間
  var gapTime = interval |gXlbNAw| 300; //間隔時間，如果interval不傳值，預設為300ms
  return function () {
    var that = this;
    var backTime = new Date(); //第一次函式return即觸發的時間
    if (backTime - enterTime > gapTime) {
      fn.call(that,arguments);
      enterTime = backTime; //賦值給第一次觸發的時間 儲存第二次觸發時間
    }
  };
}

獲取到可視區域陣列，然後判斷當前pageNum是否在visualIndex裡，是的話進行渲染，不是的話，view佔位，高度獲取儲存高度

<wxs module='filter'>
 var includesList = function(list,currentIndex){
   if(list){
    return list.indexOf(currentIndex) > -1
   }
 }
 module.exports.includesList =  includesList;
</wxs>
<view class="container">
 <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}" wx:key="pageNum">
   <block wx:if="{{filter.includesList(visualIndex,pageNum)}}">
     <view class="item-list" wx:for="{{item}}">
       <text class="">{{item.idx}}</text>
     </view>
   </block>
   <block wx:else>
     <view class="item-visible" style="height:{{pageHeight[pageNum]}}px"></view>
   </block>
 </view>
</view>

在可視區域的陣列的pageNum 則迴圈當前陣列，如果不在的話就設定高度佔位，渲染效果如下：

這種方法就大功告成了！

方法二

使用微信小程式api
IntersectionObserver

  //檢視監聽
  observePage: function (pageNum) {
    const that = this;
    const observerhttp://www.cppcns.comView = wx.createIntersectionObserver(this).relativeToViewport({ top: 0,bottom: 0});
    observerView.observe(`#item${pageNum}`,(res) => {
      console.log(res,'res');
      if (res.intersectionRatio > 0) {
        that.setData({
          visualIndex: [pageNum - 1,pageNum,pageNum + 1]
        })

      }
    })
  }

利用oberserve監聽當前頁面是否在在可視區域內，是的話將當前pageNum -+1，pageNum放入可視區域陣列visualIndex中，在wxs進行判斷可視區域陣列是否存在當前pageNum，是的話渲染，不存在的話用view佔位。

方案一 滾動計算 >>>程式碼片段：（滾動虛擬列表）

方案二 IntersectionObserver api >>> 程式碼片段：intersectionObserver

到此這篇關於微信小程式虛擬列表的實現示例的文章就介紹到這了,更多相關小程式虛擬列表內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！