小程序setdata优化_小程序长列表渲染优化另一种解决方案 （二）

前言

上面这篇文章

daisy：小程序长列表渲染优化另一种解决方案​zhuanlan.zhihu.com

，我们通过监听Scroll事件来计算当前应该渲染哪一屏，但是我们有observeAPI啊，为何要那么麻烦，所以这篇文章，我们在用这个API简化一下。

简化思路

利用observeAPI 在每一屏渲染完成后，监听当前这一屏是否在可视区域内，如果在就给它赋值正常的数组，否则是{ height: that.pageHeightArr[pageIndex] } 。

这里新增一个observePage 的函数来做这个事情就行。

  observePage: function(pageIndex) {
    const that = this;
    const { hasShowAlreadySaw, showMoreVideosIcon } = this.data;
    const observerObj = wx.createIntersectionObserver(this).relativeToViewport({ top: 2 * this.windowHeight, bottom: 2 * this.windowHeight });
    observerObj.observe(`#wrp_${pageIndex}`, (res) => {
      if(res.intersectionRatio <= 0) {
        that.setData({
          ['list[' + pageIndex + ']']: { height: that.pageHeightArr[pageIndex] } ,
        })
        
      } else {
        that.setData({
          ['list[' + pageIndex + ']']: that.wholeVideoList[pageIndex] ,
        })
      }
    });
  },

这样我们就可以把原来onPageScroll的东西删除了，完整代码如下：

https://developers.weixin.qq.com/s/gt4kuZmp73hL