微信小程序虛擬列表的實(shí)現(xiàn)示例

更新時(shí)間：2021年07月15日 16:00:34 作者：敲代碼的小菜

大部分小程序都會(huì)有這樣的需求，頁(yè)面有長(zhǎng)列表，需要下拉到底時(shí)請(qǐng)求后臺(tái)數(shù)據(jù)，一直渲染數(shù)據(jù)，當(dāng)數(shù)據(jù)列表長(zhǎng)時(shí)，會(huì)發(fā)現(xiàn)明顯的卡頓，頁(yè)面白屏閃頓現(xiàn)象，那么如何實(shí)現(xiàn)小程序虛擬列表，感興趣的可以了解一下

前言

分析

請(qǐng)求后臺(tái)數(shù)據(jù)，需要不斷的setData，不斷的合并數(shù)據(jù)，導(dǎo)致后期數(shù)據(jù)渲染過(guò)大
渲染的DOM 結(jié)構(gòu)多，每次渲染都會(huì)進(jìn)行dom比較，相關(guān)的diff算法比較耗時(shí)都大
DOM數(shù)目多，占用的內(nèi)存大，造成頁(yè)面卡頓白屏

初始渲染方法

/*
 * @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: [],          // 所有數(shù)據(jù)
  },
  //options(Object)
  onLoad: function (options) {
    this.index = 0
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },




    ]
    this.setData({ list: arr })
  },

  onReachBottom: function () {
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        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>

每次觸底重新請(qǐng)求數(shù)據(jù)，合并數(shù)組并重新setData，列表負(fù)責(zé)時(shí)，會(huì)出現(xiàn)卡頓白屏，每次setData的數(shù)據(jù)越來(lái)越大，增加了通訊時(shí)間，也渲染了過(guò)多的dom元素，如下圖：

初步優(yōu)化

1.將一維數(shù)組改為二位數(shù)組

通常情況下，setData是進(jìn)行了全部的數(shù)據(jù)重新渲染
分頁(yè)請(qǐng)求，對(duì)服務(wù)器壓力相對(duì)較小，分頁(yè)增量渲染對(duì)setData壓力也小
setData對(duì)二維數(shù)組查找對(duì)應(yīng)索引的那條數(shù)據(jù)的下標(biāo)，用 setData 進(jìn)行局部刷新
setData的時(shí)候，只是將當(dāng)前這一屏幕的數(shù)據(jù)賦值

// 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.js
Page({
  data: {
    list: [],          // 所有數(shù)據(jù)
  },
  //options(Object)
  onLoad: function (options) {
    this.index = 0;
    this.currentIndex = 0;          // 當(dāng)前頁(yè)數(shù) pageNuma
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },




    ]
    this.setData({ [`list[${this.currentIndex}]`]: arr })
  },

  onReachBottom: function () {
    this.currentIndex++;            // 觸底+1
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },

    ]
    this.setData({
      [`list[${this.currentIndex}]`]: arr
    })
  },
});

這樣我們就可以看到，整個(gè)渲染是以屏為分頁(yè)來(lái)渲染，請(qǐng)求幾個(gè)pageNum，那么就渲染幾屏，沒(méi)屏里再進(jìn)行沒(méi)個(gè)列表渲染。

進(jìn)一步優(yōu)化

2我們可以只渲染可視區(qū)域的一屏、或者渲染可視區(qū)域附近的幾屏，其他區(qū)域用view占位，不進(jìn)行具體渲染，從而減少dom渲染，減少節(jié)點(diǎn)過(guò)多造成的問(wèn)題。

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

獲取當(dāng)前屏幕高度、渲染時(shí)獲取每屏高度、滾動(dòng)距離計(jì)算
存儲(chǔ)獲取到的全部渲染數(shù)據(jù)、存儲(chǔ)每屏高度、通過(guò)onPageScroll計(jì)算可視區(qū)域處于那一屏
除了可視區(qū)域其他區(qū)域數(shù)據(jù)為空，用view占位

    is.currentIndex = 0;           // 當(dāng)前頁(yè)數(shù) pageNum
    this.pageHeight = [];            // 每屏高度存儲(chǔ)
    this.allList = [];               // 獲取到的所有數(shù)據(jù)
    this.systemHeight = 0;           // 屏幕高度
    this.visualIndex = [];           // 存儲(chǔ)可視區(qū)域pageNum

進(jìn)入頁(yè)面時(shí)，掛載相關(guān)數(shù)據(jù)：

 // 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;           // 當(dāng)前頁(yè)數(shù) pageNum
    this.pageHeight = [];            // 每屏高度存儲(chǔ)
    this.allList = [];               // 獲取到的所有數(shù)據(jù)
    this.systemHeight = 0;           // 屏幕高度
    const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      }
    ]
    this.setData({ [`list[${this.currentIndex}]`]: arr }, () => {

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

給每一屏的view動(dòng)態(tài)的設(shè)置id名字，方便在渲染時(shí)獲取每屏高度，并進(jìn)行存儲(chǔ)，為后續(xù)不在可視區(qū)域占位設(shè)置高度使用
循環(huán)pageHeight，相加每個(gè)分頁(yè)高度和當(dāng)前滾動(dòng)距離進(jìn)行比較,獲取到當(dāng)前渲染的pageNum，然后把當(dāng)前選渲染的pageNum -+1，上一屏幕和下一屏幕放入數(shù)組中，當(dāng)前三個(gè)分頁(yè)數(shù)據(jù)展示，其他屏幕的數(shù)據(jù)進(jìn)行view占位，高度為存儲(chǔ)高度。

   // 滾動(dòng)距離計(jì)算
  onPageScroll: throttle(function (e) {
    let pageScrollTop = e[0].scrollTop;  
    let that = this;
    // 滾動(dòng)計(jì)算現(xiàn)在處于那一個(gè)分頁(yè)的屏
    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)

實(shí)時(shí)監(jiān)控滾動(dòng)，做節(jié)流優(yōu)化處理

const throttle = (fn, interval) => {
  var enterTime = 0; //觸發(fā)的時(shí)間
  var gapTime = interval || 300; //間隔時(shí)間，如果interval不傳值，默認(rèn)為300ms
  return function () {
    var that = this;
    var backTime = new Date(); //第一次函數(shù)return即觸發(fā)的時(shí)間
    if (backTime - enterTime > gapTime) {
      fn.call(that, arguments);
      enterTime = backTime; //賦值給第一次觸發(fā)的時(shí)間 保存第二次觸發(fā)時(shí)間
    }
  };
}

獲取到可視區(qū)域數(shù)組，然后判斷當(dāng)前pageNum是否在visualIndex里，是的話進(jìn)行渲染，不是的話，view占位，高度獲取存儲(chǔ)高度

<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>

在可視區(qū)域的數(shù)組的pageNum 則循環(huán)當(dāng)前數(shù)組，如果不在的話就設(shè)置高度占位，渲染效果如下：

這種方法就大功告成了！

方法二

使用微信小程序api
IntersectionObserver

  //視圖監(jiān)聽(tīng)
  observePage: function (pageNum) {
    const that = this;
    const observerView = 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監(jiān)聽(tīng)當(dāng)前頁(yè)面是否在在可視區(qū)域內(nèi)，是的話將當(dāng)前pageNum -+1，pageNum放入可視區(qū)域數(shù)組visualIndex中，在wxs進(jìn)行判斷可視區(qū)域數(shù)組是否存在當(dāng)前pageNum，是的話渲染，不存在的話用view占位。

方案一滾動(dòng)計(jì)算 >>>代碼片段：（滾動(dòng)虛擬列表）

方案二 IntersectionObserver api >>> 代碼片段：intersectionObserver

到此這篇關(guān)于微信小程序虛擬列表的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)小程序虛擬列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: