微信小程序swiper组件用法实例分析【附源码下载】

微信小程序swiper组件用法实例分析【附源码下载】

本文实例讲述了微信小程序swiper组件用法。分享给大家供大家参考，具体如下：

关于视图容器swiper的详细内容可参考官方文档

先来看看运行效果：

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: 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：

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

{{index}}

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

{{index}}

indicator-dots ({{indicatorDots}})

autoplay ({{autoplay}})

interval

duration

index.wxss：

.slide-image{

display: inline;

}

.textindex{

position: absolute;

top :20px;

color: red;

}

附：完整实例代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。