小程序swiper轮播页点击事件-小程序swiper轮播-swiper小程序-即速应用

小程序swiper轮播页点击事件-小程序swiper轮播-swiper小程序

浏览量：3355 时间：2020-04-06 来源：江苏小白龙

1.
Swiper轮播页组件属性indicator-dots:是否显示面板指示点(小点点)indicator-color:未选中指示点颜色Indicator-active-color:当前选中的标示点颜色autoplay:是否自动播放current:当前所在滑块的indexCurrent-item-id:当前所在滑块的item-id不能与current同时制定interval:自动切换时间间隔duration:滑动动画时常bindchange:current改变时会触发change事件e.datall{current.current}item-id:组件内容wxxml代码
swiperindicator-dots"{{indicatorDots}}"autoplay"{{autoplay}}"interval"{{interval}}"duration"{{duration}}"current"{{swiperCurrent}}"bindchange"swiperChange"blockwx:for"{{imgUrls}}"swiper-itemimagesrc"{{item}}"class"slide-image"bindtap"swipclick"//swiper-item/block/swiper备注:current"{{swiperCurrent}}当前indexbindchange"swiperChange”:current变化时会触发我们可以在这里面得到当前index标示blockwx:for"{{imgUrls}}"循环,imgUrls是定义的图片数组。bindtap"swipclick”图片点击事件2.
wxss代码
/*轮播页*/.swiper{height:400rpx;width:100%;}.swiper-image{height:100%;width:100%;}.slide-image{height:100%;width:100%;}3.
index.js代码
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:true,//是否轮播autoplay:true,//interval:5000,duration:1000,inputShowed:false,inputVal:"",//轮播页当前indexswiperCurrent:0,},//轮播图的切换事件swiperChange:function(e){this.setData({swiperCurrent:e.detail.current})},//轮播图点击事件swipclick:function(e){console.log(this.data.swiperCurrent)},});