推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
关于小程序swiper的问题
发布时间:2020-11-12
代码
在官方示例上给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=http://www.yiyongtong.com/archives/"{{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"/> durationindex.js
/** * create by ZenoTian */ Page({ data: { imgUrls: [ '', '', '' ], 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的值相同。
手动滑动时：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