小程序虚拟列表的实现

一、虚拟列表

可以以一屏为一个单位，而不是以一个item为一个单位，一屏是指一个列表所占的屏幕，首尾两屏的元素也一起加起来算是总的需要渲染元素。

实现方案分为下面两步：
1、将渲染列表的数组list改成二维数组。
2、只渲染当然可视区域的那一屏以及它前后一屏的元素。其他用空白div占位
要做到第二步，还需要分成三小步

• 需要知道每一屏的高度，这样才能给这个占位的空白div元素设置高度。
• 渲染下一屏last的数据，除了保留last，以及last-1那一屏的渲染，其他节点应该为空。
• 如果是获取非最后一屏幕的，通过监听onscrollTop 获取到scrollTop的值，算取当前应该渲染哪一屏，在重新组装数据setData

🌼初始化

<view>
  <view id="wrap_{{index}}" wx:for="{{ allList }}" wx:key="index">
    <view wx:if="{{ item.length > 0 }}">
      <view wx:for="{{ item }}" wx:key="ind" wx:for-index="ind" wx:for-item="itm" style="border: 1px solid;height: 200px;display: flex;align-items: center;justify-content: center;box-sizing: border-box;">
          {{ itm.id }}个元素，为第 {{ index }} 屏数据
      </view>
    </view>
    <!-- 空白div占位 -->
    <view wx:else style="height: {{ item.height}}px"></view>
  </view>
</view>

onLoad(options) {
    // 一个列表为一屏
    this.wholePageIndex = 0 // 整屏索引
    this.wholeAllList = [] // 储存所有屏数组
    this.currentPageIndex = 0 // 当前可视位置的索引
    this.currentRenderIndex = 0; // 当前渲染的索引
    this.allPageHeightList = []; // 储存每一屏的高度
    this.windowHeight = wx.getSystemInfoSync().windowHeight // 可视区域高度
	
    // 当前页数组储存
    this.wholeAllList[this.wholePageIndex] = orderData.data.content;

    // 当前页赋值
    this.setData({ ['allList['+ this.wholePageIndex + ']' ]: orderData.data.content }, () => {
        // 获取每屏高度并储存
        this.getWholeInfo()
    })
},

⛵️获取每屏高度并储存

getWholeInfo() {
    const that = this
    const wholePageIndex = that.wholePageIndex
    // 此api不能用that
    this.query = this.createSelectorQuery()
    this.query.select(`#wrap_${wholePageIndex}`).boundingClientRect()
    this.query.exec(function (res) {
      // 储存每一屏的高度
      that.allPageHeightList[wholePageIndex] = res[0] && res[0].height;
      console.log("this.allPageHeightList", that.allPageHeightList);
    })
},

🌈滚动的时候需要实时去计算当前应该在哪一屏幕

// 加上节流
onPageScroll: throttle(function (e) {
  const that = this
  const { scrollTop } = e
  const wholePageIndex = that.wholePageIndex

  // 滚动的时候需要实时去计算当前应该在哪一屏幕
  // 循环获取所有屏总高度
  let allPageHeight = 0
  for (let i = 0; i < that.allPageHeightList.length; i++) {
    allPageHeight = allPageHeight + that.allPageHeightList[i]
    // 判断当前在哪个屏，并跳出，一定要用break
    if (allPageHeight > scrollTop + that.windowHeight) {
      // 获取当前可视位置索引
      that.currentPageIndex = i
      break;
    }
  }

  const currentRenderIndex = that.currentRenderIndex

  //  当时可视位置索引 不等于 当前渲染的索引 时
  // 也就是页面上划时，需要渲染加载之前的数组
  if(that.currentPageIndex !== currentRenderIndex) {
    // 给不渲染的元素占位
    // 设置初始长度 wholePageIndex + 1 长度为 1，将一个固定值替换数组内的元素。
    let blankDivList = new Array(wholePageIndex+1).fill(0);
    blankDivList.forEach((item, index) => {
      if(that.currentPageIndex - 1 <= index && index <= that.currentPageIndex + 1) {
        blankDivList[index] = that.wholeAllList[index];
      } else {
        blankDivList[index] = { height: that.allPageHeightList[index]};
      }
    })

    that.currentRenderIndex = that.currentPageIndex;
    // 再重新赋值
    that.setData({ allList: blankDivList })
  }

}, 500),

😶触底加载

// 触底加载
getReachBottomData() {

  this.wholePageIndex = this.wholePageIndex + 1 // 整屏索引 + 1
  this.currentRenderIndex = this.wholePageIndex  // 当前渲染的索引 + 1
  // 储存下一页的数据
  this.wholeAllList[this.wholePageIndex] = orderData.data.content

  let dataSet = {}
  // 设置初始长度 wholePageIndex + 1 长度为 1，将一个固定值替换数组内的元素。
  let blankDivList = new Array(this.wholePageIndex + 1).fill(0)

  // 二维数组内只储存两个数组，大于两个，离 当前所在可视区域的数组，最远的两个数据
  // 赋值为其所占高度，用div空白占位，实际上真正渲染的数据只有两组
  // 所以这里要判断大于2, 3大于2，所以0到3共4条数组，再代入以上规则
  if (this.wholePageIndex > 2) {
    blankDivList.forEach((item, index) => {
      // 最远的数组用其高度占位
      if(index < blankDivList.length - 2) {
        blankDivList[index] = { height: this.allPageHeightList[index]};
      } else {
        blankDivList[index] = this.wholeAllList[index];
      }
    })
    // 记得赋值
    dataSet.allList = blankDivList;
  } else {
    dataSet['allList['+ this.wholePageIndex + ']'] = orderData.data.content

  }

  // 这里相当于 this.setData({ list[1]: orderData.data.content })
  this.setData(dataSet, () => {
    this.getWholeInfo()
  })
},

⛳️具体解释可以参考这篇文章

小程序长列表渲染优化另一种解决方案