本文实例讲述了微信小程序swiper组件用法。分享给大家供大家参考,具体如下:
先来看看运行效果:
index.js:
rush: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: false,autoplay: false,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
})
}
})
index.wxml:
rush:xml;">
utoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
imgurls}}" wx:key="{{index}}">
index.wxss:
rush:css;">
.slide-image{
display: inline;
}
.textindex{
position: absolute;
top :20px;
color: red;
}
附:
完整实例代码点击此处本站下载。希望本文所述对大家微信小程序开发有所帮助。