关于小程序swiper的问题代码
在官方示例上给swiper添加了current``bindchange``circular 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: [ 'https://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'https://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 例如:向右滑动 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 在官方文档中
如果想让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值。 下一张: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 |
关于小程序swiper的问题
发布:2018-04-25 09:08浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08