微信小程序 ---- 优化列表

我写个小作文先。。
面试时候两位面试官都问虚拟列表的问题。。我心说能不能面上再说我先搞搞。。那段时间在忙跳槽，没怎么弄。。。跳槽完毕没活儿干就开始弄。。。。。今天是虚拟列表的第三天。。从一开始的百度，到后面的——我理解但我不会，再到现在的——哼我就弄个前端假分页不得了～后面发现微信小程序会限制页面的DOM数量，具体多少我不知道但是是有这么回事儿。。以下是相关文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html#_6-WXML%E8%8A%82%E7%82%B9%E6%95%B0
但我试着貌似是没有问题，也可能因为没有到太后面的地方。。而且按照其他的思路，循环当前数据屏，没到的地方占位。。。它照样节点数量多啊

代码们

html：用了scroll-view中的bindscrolltolower或者与页面同高的容器装列表都可以，感觉scroll-view在触及底部时更好用 ⬇️

<!-- <view class="container" id="container">
  <scroll-view class="scroll-container" scroll-y="{{true}}" enhanced show-scrollbar bindscrolltolower="scrollToLower">
    <view wx:for="{{listData}}" wx:key="index" class="list-item" style="height: {{itemHeight}}px;">{{item}}</view>
  </scroll-view>
</view> -->

<view class="container" id="container">
  <view wx:for="{{listData}}" wx:key="index" class="list-item" style="height: {{itemHeight}}px;line-height: {{itemHeight}}px;">{{item}}</view>
</view>

css样式很简约，需要注意的点是，容器需要设置固定高度 ⬇️

.container {
  height: 100%;
}
.scroll-container {
  height: 100%;
}

.list-item {
  text-align: center;
}

JS部分 ⬇️

Page({
  data: {
    //屏幕区域展示数据
    containerHeight: 0,
    listData: [],
    itemHeight: 40,
    showCount: 0,
    //获取到的全部数据
    initData: [],
    listParams: {
      pageNum: 1,
      pageSize: 0
    }
  },
  // 获取容器高度 ---- 设置pageSize
  counting() {
    return new Promise(resolve => {
      let query = wx.createSelectorQuery();
      query.select('#container').boundingClientRect(rect => {
        let containerHeight = rect.height;
        let showCount = Math.floor(containerHeight / this.data.itemHeight);

        this.setData({
          [`listParams.pageSize`]: showCount + 4,
          [`listParams.pageNum`]: 0
        })
        resolve();
      }).exec();
    })
  },
  //获取数据
  getList() {
    //虚拟数据。。。。哈哈哈哈哈哈哈两万条呢
    let initData = [];
    for (let i = 0; i < 20000; i++) {
      initData.push(i);
    }
    //最多几页
    let maxPageNum = Math.ceil(initData.length / this.data.listParams.pageSize)
    this.setData({
      initData,
      maxPageNum
    })

    this.renderPage(0);
  },
  scrollToLower() {
    if (this.data.maxPageNum - 1 <= this.data.listParams.pageNum) {
      wx.showToast({
        title: "到底啦～～～～"
      })
      return;
    }

    this.setData({
      [`listParams.pageNum`]: this.data.listParams.pageNum + 1
    })
    this.renderPage(this.data.listParams.pageNum);
  },
  renderPage(currentPage) {
    let startIndex = currentPage * this.data.listParams.pageSize;
    let initData = JSON.parse(JSON.stringify(this.data.initData));
    // 用JSON方法倒了一遍因为splice会改变原数组。。
    let currentData = initData.splice(startIndex, this.data.listParams.pageSize);

    currentData.map((item, index) => {
      let currenIndex = index + currentPage * this.data.listParams.pageSize;
      this.setData({
        [`listData[${currenIndex}]`]: item
      })
    })
  },
  onLoad(options) {
    this.counting().then(() => {
      this.getList()
    });
  },
  onReachBottom() {
    this.scrollToLower();
  }
})

~_tada~~~啥也不是。。下次真的虚拟完再见