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

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

问题

在微信小程序中遍历多个van-slider组件,sliderList数量超过500个,代码如下所示:

遍历多个后在编辑器,真机上面效果非常卡,无法滚动

思路

先考虑是否为内存不足,经过排查并不是内存问题

是否为数据过多,经过排查每一个对象里只有一个value参数,不是数据问题

是否为滚动的样式问题,通过添加样式问题得到解决

解决方法

给每一个sliderItem添加以下样式,以及给列表上一层(class为sliderList)添加样式

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

添加后问题即可修复

注意

列表多元素的情况比如电商的商品列表(多元素),需要另外测试

相关推荐
酷酷的阿云5 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205877 分钟前
web端手机录音
前端
齐 飞13 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹30 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10092 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js