微信小程序遍历多个组件出现卡顿

进击的yuan人

于 2024-03-13 17:27:23 发布

阅读量810

点赞数 7

CC 4.0 BY-SA版权

文章标签：微信小程序小程序 vant weapp 前端

文章讲述了在微信小程序中，当遍历大量van-slider组件时遇到的卡顿问题，经排查发现是滚动样式导致。通过为sliderItem和sliderList添加特定CSS样式解决了这个问题，提醒开发者在处理多元素列表时需额外测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序遍历多个组件出现卡顿/遍历多个相同的组件滚动出现卡顿

在微信小程序中遍历多个van-slider组件，sliderList数量超过500个，代码如下所示：
问题展示
遍历多个后在编辑器，真机上面效果非常卡，无法滚动

先考虑是否为内存不足，经过排查并不是内存问题
是否为数据过多，经过排查每一个对象里只有一个value参数，不是数据问题
是否为滚动的样式问题，通过添加样式问题得到解决

给每一个sliderItem添加以下样式，以及给列表上一层（class为sliderList）添加样式

.sliderList {
-webkit-overflow-scrolling: touch  
}
.sliderItem {
-webkit-overflow-scrolling: touch  
}

添加后问题即可修复

注意
列表多元素的情况比如电商的商品列表（多元素），需要另外测试