swiper容器内部元素超出一定数量切换超级卡,无论安卓还是ios
示例代码:
// pages/testScroll/testScroll.js Page({ /** * 页面的初始数据 */ data: { checkItem: 0, list: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let len = 2000; //这里len超过一定数量在安卓下ISO下就会超级卡顿 this .setData({list: Array(len).fill(0)}) }, changeTab: function (e) { let {current} = e.detail; this .setData({checkItem: current}) }, changeTabClick: function (e) { let {index} = e.currentTarget.dataset; this .setData({checkItem: index}) } }) |
<!--pages/testScroll/testScroll.wxml--> < view class = "container" > < view class = "tab" > < block wx:for = "{{[0,0,0,0]}}" wx:key = "index" > < view class = "t-item {{checkItem == index ? 'check' : ''}}" data-index = "{{index}}" bindtap = "changeTabClick" >Tab{{index+1}}</ view > </ block > </ view > < swiper indicator-dots class = "swiper" duration = "200" bindchange = "changeTab" > < swiper-item > < scroll-view scroll-y = "{{true}}" class = "c-box" > < block wx:for = "{{list}}" wx:key = "index" > < view class = "c-item" >Tab-{{checkItem+1}}-{{index+1}}</ view > </ block > </ scroll-view > </ swiper-item > < swiper-item > < scroll-view scroll-y = "{{true}}" class = "c-box" > < block wx:for = "{{list}}" wx:key = "index" > < view class = "c-item" >Tab-{{checkItem+1}}-{{index+1}}</ view > </ block > </ scroll-view > </ swiper-item > < swiper-item > < scroll-view scroll-y = "{{true}}" class = "c-box" > < block wx:for = "{{list}}" wx:key = "index" > < view class = "c-item" >Tab-{{checkItem+1}}-{{index+1}}</ view > </ block > </ scroll-view > </ swiper-item > < swiper-item > < scroll-view scroll-y = "{{true}}" class = "c-box" > < block wx:for = "{{list}}" wx:key = "index" > < view class = "c-item" >Tab-{{checkItem+1}}-{{index+1}}</ view > </ block > </ scroll-view > </ swiper-item > </ swiper > </ view > |
/* pages/testScroll/testScroll.wxss */ .cantainer { display : flex; flex- direction : column; height : 100% ; } .tab { height : 80 rpx; margin-bottom : 30 rpx; flex: 1 ; background-color : #fff ; border-bottom : 1px solid #bababa ; align-items: center ; padding : 0 ; } .t-item { color : #333 ; width : 100 rpx; height : 100% ; display : flex; align-items: center ; justify- content : center ; } .check { background-color : #108EE9 ; color : #fff ; } .swiper { height : 1000 rpx; } .c-box { height : 1000 rpx; } .c-item { height : 80 rpx; display : flex; justify- content : center ; align-items: center ; margin-bottom : 20 rpx; background : #fff ; } |
这里跟html的的复杂度无关 ,经测试只要是swiper-item内的元素超过一定数量,siwper基本就划不动或者划起来超级卡,安卓下差不多超过500个元素就会很卡,iso1000就会很卡;其实这种数量算很低的了;比如一个业务里面订单列表,一个订单item就可能需要30个元素(view、text)等组成;那么差不多30个订单数据的元素数量就超过1000了 官方是不是没有考虑过swiper的性能问题还是说这个组件只是用来做图片轮播的?期待早日修复;很多业务列表改成滑动的话体验会好很多