小程序用swiper为什么会有卡顿的问题

看了这么多忽悠人的回答，我忍不住了！！这个卡顿可能（我觉得是一定，怕你们喷）是swiper内部数据渲染导致的，如果你们的是如下写法时出现的，那请认真看我的这个说明：1.是瞎虚否在swier-item里是死数据时没出现卡顿，2.当swiper-item的动态渲染，swiper-item下数据变化时卡顿。

解决办法：在data定义一个数组：arr:[]在获取到tab栏类目的时候动态添加对象到arr里，变成：arr[{num:0,content:[]}，{num:1,content:[]}...],然后用arr去渲染swiper-item,content为swiper-item内部的数据。每当切换一个蔽神缓新的tab时，拿到tabindex（tabindex为tab栏切换或者滑动改变的值）在arr里找到对应位置，先检测一下对应位置的content是否为空（是否已经存过数据，不过这个在该tab下数据为空时不准确），为空时请求到的数据把它放到对应位置的content里，部分代码如下"

<block wx:for="{{arr}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx">

<swiper-item>

<block wx:for="{{tabItem.content}}" >...{{item.name}}....</block>

</swiper-item>

</block>"。content不为空什么都不做。这样就搞定了！！！

原因：这样做了以后,swiper-item只会渲染一次，除了你第一次切换tab时需要加载数据，其他时候都直接切换已经渲染好的swiper-item,就不会出现卡顿现象了，如果你解决了问题，就点赞吧，让更多宏模人看见。。。菜鸟一枚，轻喷。。。

```

<!-- 滚动图 -->

<view class="swiper" style="position:relative">

<swiper autoplay="{{true}}" circular="{{true}}" onChange="currentHandle">

        <block a:for="{{swiperList}}">

          <swiper-item class="swiper-box">

            <view class="swiper-item" style="width:100%height:300rpx">

                <!-- lazy-load根据需要 onTap可以点击图片跳转 data-url绑定到跳转的链接-->

              <image lazy-load="{{true}}" mode="scaleToFill" src="{{item.image}}" style="display:flexwidth:100%height:300rpx"

                onTap="swiper" data-url="{{item.url}}" data-index='{{index}}' />

            <镇枣镇/view>

          </swiper-item>

        </block>

      </swiper>

    <!-- 圆点 -->

      <view class="swiper_dot">

        <view class="trans MR10 {{current === index ?'active': ''}}" a:for="{{swiperList}}" a:key="{{index}}"></view>

      </view>

</view>

```

```

data(){

    swiperList:[

        {

            image:'',//图片的路径

            url:""//要跳转的路岩袜径

        },

                {

            image:'',

            url:"御粗"

        }

    ],

    current: 0,//初始化dot

},

//监听current

currentHandle(e) {

console.log(e)

    //改变current的值

    let { current } = e.detail

    this.setData({

      current

    })

},

```

```

.swiper-box {

  padding: 0 30rpx

}

.swiper-item {

  border-radius: 10rpx

  overflow: hidden

}

.swiper_dot {

  display: flex

  flex: 1

  justify-content: center

  position: absolute

  bottom: 16rpx

  left: 42%//通过绝对定位 在滚动图的正下方 具体看自己

}

.MR10 {

  margin-right: 10rpx

}

.trans {

  width: 23rpx

  height: 8rpx

  background-color: #ffffff70

  border-radius: 3.5rpx

  transition: width 0.5s linear

}

.active {

  background-color: #ffffffd7

  width: 67rpx

  transition: width 0.5s linear

}

```

---转自我的自个的

支付宝小程序Swiper 滚动图 带圆点和跳转方式_多甘范科夫斯基的博客-CSDN博客

微信小程序Swiper做Tab切换，带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换，但是有Swiper组件，其实我们也可以做滑动切换

监听Swiper的bindchange，我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的，体验不是很好。于是就有了这个demo，我们一步步优化切换体验。

首先：利用flex布局，做出tab区域，如果tab选项卡很多可以使用Scroll-view；一般的跳转式的tab用boder-bottom实现就好，这里我们加了一个“navbar-slider”，加上translateX动画实现平移切换。

然后：计算出每个tabItem的宽度，和每个item距离0坐标的距离；下中50是slider的宽度，对应上面“width:50px”

关联：1、监听item点击，切换swiper；2、监听swiper切换改变slider位置和tab显示

效果展示如下：

现在我们已经实现了，Swiper和tab的带动画联动，但是我们可以发现，我们的切换动画是在切换之后郑旦贺进行的，我们这里还可以继续优化。

swiper在切换时可以监听bindtransition，swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，dx则是平移的偏移量，我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置，这喊派里我们不能使用bindchange来校正，因为bindchange在切换时手指释放的时候就调用了，我们这里使用bindanimationfinish回调来校正（动画结束时会触发 animationfinish 事件，event.detail 同上）

最终：展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData，我们最后这种方式就会频繁的调用，所以这里其实只是提供这种思路，但是工程中并不迟告建议这么使用

小程序开发者文档

SwiperTab

---