客户购物车商品数据,可能会出现几百条商品数据,数据大小经 JSON.stringify 后插件 400 kb 左右。
这个时候 setData 到视图层渲染会很卡,会造成2秒左右的白屏。
问题明确表示数据不能做分页,也就是说接口几百条数据是一次性返回的。
我的临时方案是:先把数据截取前10条 setData ,解决白屏问题,然后 setTimeout 50毫秒后,再把整体数据 setData 赋值过。
上面方案白屏问题是解决了,但是会出现先加载的 10 条数据,这个时候去滑动屏幕也是有个一两秒滑不动(卡住,因为 后面一个 setData 在赋值所有数据)。
我看了下 setData 也没有一个 可以 push 的功能,本想循环拆分多次 setData 。
请问大家有没有类似经验或更好的方案,万分感谢!!!
整体来说就是:虚拟DOM + 数据分组渲染
可以使用https://github.com/wechat-miniprogram/recycle-view,或基于它改造已有视图
另外,明确表示数据不能做分页,这是为什么?后端不肯配合修改吗
这个有两个瓶颈吧,一个是网络请求的时间较长,一个是调用setData渲染的时间较长。
"问题明确表示数据不能做分页" 这个其实也并没有那边明确,查出来后后端切片返回并没有很高的成本
其次如果数据上不好处理,那就做前端分页好了,能适当优化setData渲染的效率
其实前端做“分页” 也是 基于我前面说的原理。
主流的做法是连续加载更多的“分页加载”
但是你这个数据量太大了,所以建议你 分段加载,并且不连续,比如第一页是1-100,用户点击后,当前是101-200,而不是1-200
分页加载啊