首页 > PHP资讯 > 工具库 > 解读和分析微信小程序组件:三、swiper滑块视图

解读和分析微信小程序组件:三、swiper滑块视图

工具库
swiper滑块组件说明:

  • 滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换

下面是WXML代码:

[XML] 纯文本查看 复制代码

[/align]                   interval duration

下面是JS代码:

[JavaScript] 纯文本查看 复制代码

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    })  }})

[CSS] 纯文本查看 复制代码

.swiper-item{    display: block;    height: 150px;}

主要属性:

  • 设置界面的内容样式,用于wxml

以上就是解读和分析微信小程序组件:三、swiper滑块视图的详细内容,更多请关注 第一PHP社区 其它相关文章!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持28不支持0