swiper容器内部元素超出一定数量切换超级卡，无论安卓还是ios
发布于 5 年前 作者 wcai 8601 次浏览 来自 问答

示例代码：

// 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: 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的性能问题还是说这个组件只是用来做图片轮播的？期待早日修复；很多业务列表改成滑动的话体验会好很多

3 回复

草鸡卡顿，我要崩溃了

我现在也遇到这个问题了，我是做日历滑动翻页用的并且日期还跟列表做联动，标签稍微多一点就很卡，请问有什么好的解决方案吗

你应该就是左右滑动的效果吧，不会有指定 current 的情况吧。如果你只是要这种翻页效果，可以自己用view写个。可以留个微信，我把我之前做的翻页demo发给你

回到顶部