《微信小程序》swiper的疯狂循环滚动的问题

使用微信小程序的swiper制作banner的时候，发现一开始能够自动滚动，但是让小程序后台运行一会儿之后再进去就会出现疯狂快速滚动的问题。

---

---

上面的城市和银行数据是同步滚动的，城市的滚动是通过scroll-view来实现的，为了实现同步滚动我用了swiper的current属性来控制scroll-view的样式为选中。

 <scroll-view class="cooperation-bank-list" scroll-x scroll-with-animation scroll-left="{{scrollLeft}}">
      <block wx:for="{{key}}" wx:for-item="items" wx:key="unique" wx:for-index="idx">
          <view class="cooperation-bank-item {{currentIndex==idx?'active':''}}">
             <text data-current="{{idx}}" bindtap="swichNav">{{items.areaName}}text>
          view>
      block>
scroll-view>

通过边距控制Scroll-view实现城市滚动，超出隐藏。这里面我用到了currentIndex来控制选中的样式，这个currentIndex就是swiper的current。

<swiper current="{{currentTab}}" autoplay="true" circular="true" duration="300" bindchange="switchTab">
   <block wx:for="{{value}}" wx:for-item="itemOne" wx:key="unique" wx:for-index="idx">
       <swiper-item class="wrapStart" wx:key="unique">
            <swiper class="swiper-box" style='width:100%;height:100%;' indicator-dots="true" indicator-active-color="#5dc4ff" bindchange="swiperChange" circular="true">
                <swiper-item class="wrapStart" current="{{currentSwiper}}" wx:for="{{itemOne}}" wx:for-item="itemO" style='width:100%;height:100%;' wx:key="ee">
                     <block wx:for="{{itemO}}" wx:for-item="itemsE" style='' wx:key="unique">
                        <view class="bank-container" catchtap="onBankBespeak" data-bankname="{{itemsE.bankName}}" data-id="{{idx}}" data-bankcode="{{itemsE.bankCode}}" data-bankurl="{{itemsE.bankUrl}}">
                            <image class="bank-img" src="{{itemsE.imgUrl}}">image>
                             <text class="bank-name">{{itemsE.bankName}}text>
                         view>
                       block>
                 swiper-item>
          swiper>
    swiper-item>    
   block>
 swiper>

这里主要是因为使用了嵌套swiper轮播所以代码显的复杂了一点，首先最外层的switchTab事件控制城市scroll-view的边距，通过current。
然后我们来看js代码：

    // 滚动切换标签样式
    switchTab: function(e) {
        var to = 0;
        const _this = this;
        if (e.detail.current >= 8) {
            to += 80
        } else if (e.detail.current >= 5 && e.detail.current < 8) {
            to += 70;
        } else {
            to += 60;
        }
        _this.setData({
            currentIndex: e.detail.current,
            scrollLeft: e.detail.current * to,
        });
    }

之所以出现疯狂滚动的原因是之前的currentIndex我写的是currentTab，和swiper的current共用了同一变量，而小程序文档中明说了不能直接在setData中设置current属性，所以出现了疯狂滚动。后来我通过currentIndex来控制scroll-view，它并不会影响到swiper的current。

---

正确：

---

---

错误：

---

---

微信小程序官方文档给出的关于swiper的bug提示：

---

记录一下自己开发遇到的问题。