Вопросы об апплете WeChat Swiper

Апплет WeChat

Вопрос про апплет 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: При ручном назначении текущего значения соединение и скольжение недействительны

Нажмите на следующий, давsetDataИзменятьswiperизcurrentзначение, при переключении с последнего на первое, хотя установленноеcircular, но это будет не эффект соединения и скольжения, а скольжение от хвоста до головы.

Вопрос 2: Привязанное текущее значение, скользящее, не меняется

Давая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

в официальной документации

Если вы используете setData в функции обратного вызова события bindchange для изменения текущего значения, это может привести к непрерывному вызову >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: Контролируйте переключение значения тока, которое не совпадает с результатом скользящего кода переключения.

если взять в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
Категории