swiper容器内部元素超出一定数量切换超级卡，无论安卓还是ios - WXOPEN Club

示例代码：

// 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})

}

})

<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: 80rpx;

margin-bottom: 30rpx;

flex: 1;

background-color: #fff;

border-bottom: 1px solid #bababa;

align-items: center;

padding: 0;

}

.t-item {

color: #333;

width: 100rpx;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

.check {

background-color: #108EE9;

color: #fff;

}

.swiper {

height: 1000rpx;

}

.c-box {

height: 1000rpx;

}

.c-item {

height: 80rpx;

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 20rpx;

background: #fff;

}

这里跟html的的复杂度无关，经测试只要是swiper-item内的元素超过一定数量，siwper基本就划不动或者划起来超级卡，安卓下差不多超过500个元素就会很卡，iso1000就会很卡；其实这种数量算很低的了；比如一个业务里面订单列表，一个订单item就可能需要30个元素（view、text）等组成；那么差不多30个订单数据的元素数量就超过1000了官方是不是没有考虑过swiper的性能问题还是说这个组件只是用来做图片轮播的？期待早日修复；很多业务列表改成滑动的话体验会好很多