search

chdyiboke / weekly

issue and share weekly
5 stars 1 forks source link

微信小程序长列表渲染优化 #39

Open liukexina opened 4 years ago

liukexina commented 4 years ago

例如一个商品列表页，用户不断上滑加载数据，而每次加载数据时通常都是将获取的新数据和旧数据通过concat进行合并在一个数组内，导致后续setData数据越来越大

liukexina commented 4 years ago

利用createIntersectionObserver api 监听元素是否在显示在页面或者显示页面的距离{bottom\top\left\right}

this.createIntersectionObserver().relativeToViewport({bottom: 200}).observe('.noMore', (res) => {
      if(res.intersectionRect.top > 0) {
        const page = this.data.page;
        this.setData({
          page: page + 1,
          ['listData[' + page + ']']: this.properties.list.slice(page * 10, page * 10 + 10),
        })
      }
})