uniapp小程序虚拟列表

实现方法

1.通过扁平话数组，对请求的数据进行存储。扁平化数组一个数组存储一页数据

2.遍历扁平数组，通过计算条件需要显示的显示数据不需要的用占位的方式样式给每一页添加对应的高度，拼接成页面高度数组

3.通过onPageScroll监听滚动距离，通过计算判定当前滚动到那一页，并在扁平数组大于页面高度数时重新赋值高度数组

4.在请求数据完后作判定扁平数组大于高度数组，重新赋值高度数组，确保高度数组没有问题

遇到的问题

💡滚动到那一页会有偏差，是因为页面高度数组有问题没有及时获取对应的数组高度

通过判断扁平数组长度是否大于页面高度数组长度如果大于就先将滚动到那一页的索引赋值扁平数组长度-1

💡滚动节流会导致一些显示问题

可以去掉滚动节流

💡快速滚动会导致一些显示问题

显示问题一方面盒子高度没有正确加载，

💡onPageScroll触发不了

methods中有这方法名在周期中调这个就会失效，可以更改名称或者删除

代码块

 this.systemHeight = uni.getSystemInfoSync().windowHeight; // 获取屏幕高度
 onPageScroll(event) {
    if (!event.scrollTop || this.scrollControlDisabled) {
      return;
    }
    let pageScrollTop = event.scrollTop;
    this.scrollTop = event.scrollTop;

    // 检查是否需要加载更多页面并更新页面高度
    if (this.pagesData.length > this.pageHeight.length) {
      this.currentIndex = this.pagesData.length - 1;
      this.$nextTick(() => {
        this.computedHeight()
      });
    } else {
      let scrollTop = 0;
      for (let i = 0; i < this.pageHeight.length; i++) {
        scrollTop += this.pageHeight[i];
        if (scrollTop > pageScrollTop + this.systemHeight) {
          this.currentIndex = i;
          break;
        }
      }
    }
  },