问题场景
事情是这样的,我做了一个在线答题小程序,有一个顺序练习模块,每次顺序练习,都要把整个题库过一遍,每个题库题目数量不一,有的几百,有的上千,为方便讨论,我们假定某个题库1000道题目,
具体答题模块是用swiper来实现的,当swiper的数组很大的时候,setData会有三四秒的延迟,我们都知道setData的效率,但是没想到这么厉害。
问题描述
问题不是swiper本身,而是setData
https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html
官方资料
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
功能演示
https://developers.weixin.qq.com/community/develop/article/doc/00040235334788f8651a168d951413
这个问题困扰了我几个周时间,
不敢梳头,因为白头发会掉了一地,不要问我为什么是白头发
不敢照镜子,因为黑眼圈更重了;
不敢出门走路,因为问题没有解决,抬不起头来。
昨天我在群里发了一个有偿征求优化方案,小伙伴很积极,讨论了一个晚上,第二天就有朋友把优化的方案,递给我,今天中午验证有效,亲测。
现在好了,问题得到圆满解决,心情都不一样了,原来处处都是美
解决方案
大家都能想到方案就是分页,虽然总数组长度为1000,但是每次渲染到swiper的可能只有3、5、7不等的小数组,这样通过setData传递到UI层的时候才不会卡。
但是分页的逻辑要我们自己来控制,怎么判断左滑动,怎么判断右滑动,滑动边界问题,很多细节,总之我为了这个问题花了一个周末没有解决,
就是在大方向明确的情况下,还是写不出来。
具体的实现方案晚点我整理下发出来,同时也希望想挑战的同学锻炼下。
在这里特别感谢群里的两位小伙伴
社区相关帖子
https://developers.weixin.qq.com/community/develop/article/doc/000ecafb3486f07000c92c3225c013
https://developers.weixin.qq.com/community/develop/doc/000e4c77da47208296f8b0b4c51800
感谢
@~~娃娃
@~~ dinner
这个讨论很有意义,相信以后大家都会碰到这个问题。
微信官方有为此问题做了相应的解决方案组件:
1、长列表
recycle-view | 微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/recycle-view.html
2、video-swiper | 微信开放文档
video-swiper就是优化视频数组量很大的时候用的,是把video固定在swiper里面,如果有需要可以把里面的video换成自己的item
https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/video-swiper.html
记得早几个月前社区就有相关长列表 setData 的文章发表过。微信官方也出过 recycle-view 长列表的解决方案。
很棒的文章,就是有一点有问题,熬夜的程序员是没有头发的,所以你是没有头发的,哈哈哈
觉得你是个女生
如果有想挑战下的,可以尝试下,很简单的一个场景,数组长度1000,自己模拟下,然后渲染到swiper里面,左右滑动
真的很有挑战
我也遇到了这种问题,请问楼主可以加那个万能的微信群吗
有个问题! 楼主这里用的是获取全部的数据,如果是单个获取10个呢? 当滑动到最后一项的时候可以在onchange事件里面发起请求添加数据,但渲染swiper-item的数据发生改变的话,swiper会重置到第一项!!! 求解决!!!!!感谢!!!!!
10来个卡壳,你的问题不在swiper,在富文本组件
楼主好,我最近也做了一款在线答题小程序。有反馈卡壳现象,我是10个来的,也太不经用了吧。(不过,里面是富文本组件)。。。楼主有好的解题思路吗