前端数据绑定如何避免数据过多导致页面的卡顿?
用变量news来保存从接口获取的新闻数据
接口:api.bieryun.com/api/news/?pageNumer=1&pageSize=50
js:
this.setData({
news:data.data
})
wxml:
<block wx:for="{{news}}" wx:for-item="new">
<view>{{new.xx}}</view>
</block>
上拉加载更多新闻:
api.bieryun.com/api/news/?pageNumer=2&pageSize=50
if(this.data.totalPage > this.data.pageNumber) {
var newData = this.data.news.concat(data.data);
this.setData({
news: newData
});
}
当上拉6次时,newsData 数据为50 * 6 = 300条数据,直接绑定到网页上会卡2秒才完成。
约加载越卡。
这种情况有什么好的解决方法?
滚动的时候,做dom的移除的工作,只展示出现在屏幕中的新闻,屏幕外面的新闻把内容dom移除,你可以查考下微信网页版!微信网页版几千个好友就是这么做的!
类似于分页,只展示当前页的数据
1.看下函数节流和防抖,控制分页请求,
避免短时间内进行多次分页请求,保证每次只多加载50条数据
2.节点优化,避免过多无用的节点,尽量减少图片质量,进行图片懒加载。
同时可以做下第一个回答所说的dom移除的工作,但是要计算好占位。
其实第一点应该就能很大的解决问题了