uni swiper卡顿长列表优化

Posted 2023-04-15

参考技术A uni的swiper官方不建议渲染太多，只用作渲染少量轮播图用。
大致数量在50左右会明显卡顿半秒左右，1百多明显超过1秒，三四百则会三四秒很正常。关键词类似长列表优化
侧滑的场景，比如题库左右切换有的成百上千，抖音之类的卡片切换都会存在，已有解决方案参考站内。
原文参考下方：

curindex list对应的数据
swiperIndex 轮播图索引一直0/1/2循环 （是长列表swiper中优化只显示上一张当前下一张）

【参考资料】 https://www.jianshu.com/p/b8841a8b7417

vue长列表性能优化

参考技术A

一、原因
当页面dom元素太多时浏览器渲染速度就会变慢，当浏览器内存不足时甚至会导致浏览器卡顿或者卡死等现象。因此对症下药，解决方案就是减少页面dom的渲染。

二、原理
可以通过按需进行加载dom，即只显示可视化区域的数量。从而减少dom的结构，实现性能提升。因此，分页加载、懒加载等方案根本治标不治本。

三、实现
此文章基于 vue-virtual-scroll-list 第三方插件，通过虚拟列表进行滚动加载数据。

2个关键的参数，分别是size和keeps。size属性指每一行高度，默认50px，keeps属性指每一行显示个数， 默认30个。

四、效果