关于微信小程序swiper的问题-白红宇

关于小程序swiper的问题

代码

在官方示例上给swiper添加了current``bindchange``circular

添加了一个button``bindtap用于切换下一张

index.wxml


      
         
            
           
        
     
    
     interval
     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:1bindchange事件 this.data.index:2 e.detail.current:0bindchange事件 this.data.index:2 e.detail.current:2bindchange事件 this.data.index:2 e.detail.current:1bindchange事件 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的值相同。

下一张：0bindchange事件 this.data.index:0 e.detail.current:0下一张：1bindchange事件 this.data.index:1 e.detail.current:1下一张：2bindchange事件 this.data.index:2 e.detail.current:2下一张：0bindchange事件 this.data.index:0 e.detail.current:0下一张：1bindchange事件 this.data.index:1 e.detail.current:1复制代码

手动滑动时：bindchange事件回调中的，this.data.index的值会是上一次的值

bindchange事件 this.data.index:2 e.detail.current:1bindchange事件 this.data.index:1 e.detail.current:0bindchange事件 this.data.index:0 e.detail.current:2bindchange事件 this.data.index:2 e.detail.current:1bindchange事件 this.data.index:1 e.detail.current:0复制代码