1. 程式人生 > >《微信小程式》swiper的瘋狂迴圈滾動的問題

《微信小程式》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提示:

這裡寫圖片描述

記錄一下自己開發遇到的問題。