微信小程序实现上拉加载分页列表的性能优化_提升小程序分页加载速度

微信小程序实现上拉加载分页列表的性能优化

我们的功能里面有个滚动到底部加载的功能，优化前我们的做法是这样的：

• 大部分人面对长列表滚动的时候，一开始的处理方式都是这样的，如果数据不多，只有几页可能不会太暴露问题，如果页数过多，几十页甚至上百页的情况，list的数据会越来越大，每次setData的数据就会越来越多，因而每次页面重新渲染的节点就会越来越多，从而导致滚动到后面，加载越来越慢。
• 另外，由于小程序的视图渲染层和数据逻辑处理层是分开的，不是在同一个线程上面的，从用户触发页面交互，到处理数据逻辑，最后层现页面，数据到视图是需要传输的，因而小程序本身对数据大小也有限制，不能超过1M。

实例代码

// 1: 初始一个list，存储列表数据
data = startList
// 2: 监听滚动事件，滚动到底部获取新数据，并追加到list尾部,最后重新setData
onReachBottom:()=>{
    const {list} = this.datajs
    fetchNewData().then((res)=>{
        list.push(res.list);
        this.setData({list}) // 数据更新操作（注意的重点）
    }
}
1
2
3
4
5
6
7
8
9
10

利用setData数据路径优化：可以通过数据路径的写法来将数据分批的传输到视图层中，减少一次性setData的数据大小。具体写法如下：

// 1.通过一个二维数组来存储数据
let feedList = [[array]];
// 2.维护一个页面变量值，加载完一次数据page++
let page = 1
// 3.页面每次滚动到底部，通过数据路径更新数据
onReachBottom:()=>{
    fetchNewData().then((newVal)=>{
      	// 利用数据路径分批设置数据进行传递
        this.setData({
            ['feedList[' + (page - 1) + ']']: newVal,
        })
    }
}
// 4.最终我们的数据是[[array1],[array2]]这样的格式，然后通过wx:for遍历渲染数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14

到这里也就结束了，希望对您有所帮助。