微信小程序开发一swiper轮播图的简单实现
swiper是温馨小程序里面提供实现轮播图效果的一个的很好的组件,使用非常简单。
下面直接看我的代码
data: {
imgUrls: [
'http://img4.imgtn.bdimg.com/it/u=853537835,3029652797&fm=23&gp=0.jpg',
'http://img0.imgtn.bdimg.com/it/u=1582567067,766279201&fm=23&gp=0.jpg',
'http://img4.imgtn.bdimg.com/it/u=1489243952,524930210&fm=23&gp=0.jpg',
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
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
})
},
下面是实现的效果图:
具体参数可以到官方的Demo:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html