本文实例讲述了微信小程序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;
}
附:
完整实例代码点击此处本站下载。希望本文所述对大家微信小程序开发有所帮助。
原文地址:https://www.jb51.cc/weapp/34826.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。