作者:手机用户2502875333 | 来源:互联网 | 2017-05-11 02:02
这篇文章主要介绍了微信小程序 swiper组件详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序 swiper组件
常用属性:
自动切换时间间隔
滑动动画时长
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: 1000,
duration: 1800
},
//是否显示面板指示点
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
//是否自动切换
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
//自动切换时间间隔
intervalChange: function(e) {
this.setData({
// e.detail.value获取slider的值
interval: e.detail.value
})
},
//滑动动画时长
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
},
//当页面改变是会触发
bindchangeTag:function(e){
console.log("bindchangeTag...")
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
css:
.slide-image{
width: 100%;
height: 160px;
}
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
以上就是微信小程序-swiper组件详解实例的详细内容,更多请关注 第一PHP社区 其它相关文章!