小程序长列表优化----dom溢出无法渲染问题

解决方法-分页渲染数据，列表滚动时将可视区域外元素数据清空只保留高度

//index.js
Page({
  data: {
    list: [],
    page: 1,
    pageNumber: 10
  },
  onLoad: function() {
    this.loadData();
  },

  loadData() {
    let data = [];
    for (let i = 0; i < this.data.pageNumber; i++) {
      data.push(1 + i + (this.data.page - 1) * this.data.pageNumber)
    }
    if (this.data.page == 1) {
      this.list = [];
      this.setData({
        list: []
      })
    }

    this.list[this.data.page - 1] = data;//缓存数据，优化性能时使用
    this.setData({
      [`list[${this.data.page-1}]`]: data//分页渲染数据
    })

    //计算并记录数据的边界值
    this.boundings = Array.isArray(this.boundings) ? this.boundings : [];
    let index = this.data.page - 1;
    wx.createSelectorQuery().select(`#page${index}`).boundingClientRect((rect) => {
      this.boundings[index] = {
        height: rect.height,//高度
        top: index == 0 ? rect.top : this.boundings[index - 1].top + this.boundings[index - 1].height,//上边界
        bottom: index == 0 ? rect.bottom : this.boundings[index - 1].bottom + rect.height//下边界
      };
    }).exec()

    wx.stopPullDownRefresh()
    wx.hideLoading()
  },

  onPageScroll(e){
     //当前与滚动区域底部相交的元素索引
    this.index = this.index ? this.index : 0;
    this.windowHeight = this.windowHeight ? this.windowHeight : wx.getSystemInfoSync().windowHeight;
    this.boundings.forEach((item, index) => {
      if ((item.top < e.scrollTop + this.windowHeight) && (e.scrollTop + this.windowHeight <= item.bottom)) {
        this.index = index;
      }
    })

    //当前相交元素的前2后2元素显示，超出部分隐藏
    this.data.list.forEach((item, index) => {
      if ((index == this.index || index == this.index - 1 || index == this.index - 2 || index == this.index + 1 || index == this.index + 2) &&
        this.data.list[index] && !Array.isArray(this.data.list[index])
      ) {
        this.setData({
          [`list[${index}]`]: this.list[index]
        })
      }
      if ((index > this.index + 2 || index < this.index - 2) && Array.isArray(this.data.list[index])) {
        this.setData({
          [`list[${index}]`]: { height: this.boundings[index].height }
        })
      }
    })
    console.log(this.data.list)
  },

  onPullDownRefresh() {
    this.setData({
      page: 1
    })
    setTimeout(()=>{
      this.loadData();
    },1000)
  },

  onReachBottom() {
    this.setData({
      page: ++this.data.page
    })
    wx.showLoading()
    setTimeout(() => {
      this.loadData();
    }, 1000)
  }
})

<!--index.wxml-->
<view class="list-box">
  <view id="page{{pindex}}" class="list-page" style="height:{{pitem.height ? pitem.height+'px':'auto'}}" wx:for="{{list}}" wx:for-item="pitem" wx:for-index="pindex" wx:key="{{pindex}}">
    <view wx:if='{{pitem.length > 0}}' class="list-item" wx:for="{{pitem}}" wx:key="{{index}}">{{item}}</view>
  </view>
</view>

/* index.wxss */
.list-item{
  height: 200rpx;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #fff;
}

代码片段

商品列表应用代码片段