關於微信小程序swiper的問題

關於小程序swiper的問題

代碼

在官方示例上給swiper添加了current``bindchange``circular
添加了一個button``bindtap用於切換下一張

index.wxml

<swiper indicator-dots="{{indicatorDots}}" bindchange="swiperChange" current="{{index}}" circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<button bindtap="nextSwiper"> 下一張 </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration複製代碼

index.js

/** * create by ZenoTian */
Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    index: 2
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  nextSwiper: function (e) {
    let {index} = this.data
    index === 2
    ?index = 0
    :index++
    console.log(`下一張：${index}`)
        this.setData({
            index
        })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  },
  swiperChange: function (e) {
    console.log('bindchange事件', `this.data.index:${this.data.index} e.detail.current:${e.detail.current}`)
  }
})複製代碼

問題1：手動賦值current值，銜接滑動無效

點擊下一張，經過給setData改變swiper的current值,在從最後一張切換至第一張時，雖然設置了circular，可是不會有銜接滑動的效果，而是從尾部一路溜到了頭。

問題2：綁定的current的值，滑動並不會改變

經過給swiper的current綁定了this.data.index
默認值是生效的，可是在手滑滑塊的時候，並不會自動改變this.data.index的值。
經過bindchange的打印能夠看出來。this.data.index的值是永遠不會變的。
因此這時候current和this.data.index是不照應的。

例如：向右滑動

bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:2 e.detail.current:0
bindchange事件 this.data.index:2 e.detail.current:2
bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:2 e.detail.current:0複製代碼

在官方文檔中

若是在 bindchange 的事件回調函數中使用 setData 改變 current 值，則有可能致使 >setData 被不停地調用，於是一般狀況下請不要這樣使用

若是想讓current和this.data.index對照，仍是須要在bindchange 的事件回調函數中使用setData改變current值。

swiperChange: function (e) {

    console.log('bindchange事件',`this.data.index:${this.data.index} e.detail.current:${e.detail.current}`)

    this.setData({
      index: e.detail.current
    })
  }複製代碼

問題3：控制current的值切換，與滑動切換代碼結果不同

若是採起了在bindchange 的事件回調函數中使用setData改變current值。
點擊下一張：給this.data.index賦值後觸發的bindchange事件回調中的，this.data.index與e.detail.current的值相同。

下一張：0
bindchange事件 this.data.index:0 e.detail.current:0
下一張：1
bindchange事件 this.data.index:1 e.detail.current:1
下一張：2
bindchange事件 this.data.index:2 e.detail.current:2
下一張：0
bindchange事件 this.data.index:0 e.detail.current:0
下一張：1
bindchange事件 this.data.index:1 e.detail.current:1複製代碼

手動滑動時：bindchange事件回調中的，this.data.index的值會是上一次的值

bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:1 e.detail.current:0
bindchange事件 this.data.index:0 e.detail.current:2
bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:1 e.detail.current:0複製代碼