发表于

关于小程序swiper的问题

代码

在官方示例上给swiper添加了current``bindchange``circular
添加了一个button``bindtap用于切换下一张

index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
	/**
	 * 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是不照应的。

例如：向右滑动

1
2
3
4
5
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值。

1
2
3
4
5
6
7
8
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的值相同。

1
2
3
4
5
6
7
8
9
10
下一张：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的值会是上一次的值

1
2
3
4
5
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

总结

使用手动改变current的值时，current的值先变，然后触发bindchange，在事件回调中无需再去设置current的值。这种切换方式，设置swiper的circular="true"是无效的，会从最后一张跑到第一张。

而通过滑动屏幕切换，在bindchange，绑定的current的值是不会改变的，而实际上swiper的current已经改变了。