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

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

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

问题

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

思路

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

解决方法

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

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

添加后问题即可修复

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

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第02个小程序遍历画笔(FlipThroughTheBrushes.cs) using System; using System.Reflection; using System.Windows; using System.Windows.Input; using System.Windows.Media; namespace Chapter02 { public class FlipThroughTheBrushes : Window { int index = 0; //索引值 PropertyInfo[] props; //属性数组 [STAThread] public static void Main() { Application app = new Application(); app.Run(new FlipThroughTheBrushes()); } public FlipThroughTheBrushes() { //取得Brushes类的成员,放在props props = typeof(Brushes).GetProperties(BindingFlags.Public | BindingFlags.Static); SetTitleAndBackground(); } //鼠标按下时 protected override void OnKeyDown(KeyEventArgs args) { if (args.Key == Key.Down || args.Key == Key.Up) { //Key.Down时index-1,Key.UP时index+1 index += args.Key == Key.Up ? 1 : props.Length - 1; //index对属性数组长度取余,防止索引越界 index %= props.Length; SetTitleAndBackground(); } base.OnKeyDown(args); } //设置背景 void SetTitleAndBackground() { Title = "Flip Through the Brushes - " + props[index].Name; Background = (Brush)props[index].GetValue(null, null); //设置背景画笔 } } } GetProperties()函数用于返回对象数组,参数是限制Brushes公开和静态的属性。其实这里可以不需要这样的限制,因为Brushes的属性本来全部都是public和static。 props[index].Name返回第index个属性的名称;props[index].GetValue(null, null)返回实际的SolidColorBrush对象,第一个参数是属性所在的对象,因为Brushes是一个静态属性,没有对应的对象,传入null;第二个参数只有在属性是索引器是才有必要。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值