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

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

问题

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

思路

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

解决方法

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

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

添加后问题即可修复

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

相关推荐

  1. 程序瀑布流组件

    2024-03-16 22:56:02       68 阅读
  2. 程序自定义组件

    2024-03-16 22:56:02       46 阅读
  3. 程序-组件样式隔离

    2024-03-16 22:56:02       28 阅读
  4. 程序-组件通信

    2024-03-16 22:56:02       24 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-16 22:56:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-16 22:56:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-16 22:56:02       82 阅读
  4. Python语言-面向对象

    2024-03-16 22:56:02       91 阅读

热门阅读

  1. perl 用 XML::Parser 解析 XML文件,访问哈希

    2024-03-16 22:56:02       44 阅读
  2. redis的过期策略以及内存淘汰机制

    2024-03-16 22:56:02       47 阅读
  3. 【Android】TextView前增加红色必填项星号*

    2024-03-16 22:56:02       47 阅读
  4. Vue3.0+vite vite.config.ts配置与env

    2024-03-16 22:56:02       42 阅读
  5. 【嵌入式——QT】线程同步

    2024-03-16 22:56:02       37 阅读
  6. Qt是什么?

    2024-03-16 22:56:02       38 阅读
  7. 第1章第2节:SAS语言基础

    2024-03-16 22:56:02       41 阅读
  8. 3月16日ACwing每日一题

    2024-03-16 22:56:02       47 阅读
  9. View UI清除表单

    2024-03-16 22:56:02       38 阅读
  10. 构建专业聊天软件:C#编程深度解析

    2024-03-16 22:56:02       42 阅读
  11. 树莓派开机自动播放U盘里的照片和视频

    2024-03-16 22:56:02       68 阅读