有网站开发专业吗,广州网站建设网站开发,青海省高等级公路建设管局网站,wordpress资讯自媒体中文主题微信小程序实现上拉加载分页列表的性能优化 我们的功能里面有个滚动到底部加载的功能#xff0c;优化前我们的做法是这样的#xff1a; 大部分人面对长列表滚动的时候#xff0c;一开始的处理方式都是这样的#xff0c;如果数据不多#xff0c;只有几页可能不会太暴露问题…微信小程序实现上拉加载分页列表的性能优化 我们的功能里面有个滚动到底部加载的功能优化前我们的做法是这样的 大部分人面对长列表滚动的时候一开始的处理方式都是这样的如果数据不多只有几页可能不会太暴露问题如果页数过多几十页甚至上百页的情况list的数据会越来越大每次setData的数据就会越来越多因而每次页面重新渲染的节点就会越来越多从而导致滚动到后面加载越来越慢。另外由于小程序的视图渲染层和数据逻辑处理层是分开的不是在同一个线程上面的从用户触发页面交互到处理数据逻辑最后层现页面数据到视图是需要传输的因而小程序本身对数据大小也有限制不能超过1M。 实例代码
// 1: 初始一个list存储列表数据
data startList
// 2: 监听滚动事件滚动到底部获取新数据并追加到list尾部,最后重新setData
onReachBottom:(){const {list} this.datajsfetchNewData().then((res){list.push(res.list);this.setData({list}) // 数据更新操作注意的重点}
}利用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遍历渲染数据到这里也就结束了希望对您有所帮助。
