示例代码：
Page({
data: {
checkItem: 0,
list: []
},
onLoad: function (options) {
let len = 2000;
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>
|
.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的性能问题还是说这个组件只是用来做图片轮播的？
期待早日修复；很多业务列表改成滑动的话体验会好很多
草鸡卡顿，我要崩溃了
我现在也遇到这个问题了，我是做日历滑动翻页用的并且日期还跟列表做联动，标签稍微多一点就很卡，请问有什么好的解决方案吗
你应该就是左右滑动的效果吧，不会有指定 current 的情况吧。如果你只是要这种翻页效果，可以自己用view写个。可以留个微信，我把我之前做的翻页demo发给你
是的 官方的可能不是为了这个做的 brost145交流下
请问现在swiper这个卡顿问题你现在是怎么解决的呀
我也可以要吗？lai674744961，谢谢~~