轮播图组件swiper
微信小程序提供了滑块视图容器swiper，可以便捷实现轮播图效果。
这个名字和移动端常用的触摸滑动插件Swiper看起来很相似。小程序这个组件实现简单效果会便捷一些，但是要更复杂炫酷的效果还是Swiper插件多一些，可自定义的空间大。
微信小程序轮播图组件官方文档提供了组件使用的示例代码，显示效果：
轮播图显示效果
结构
<!--swiper.wxml-->
<!--swiper组件 begin-->
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="scaleToFill"/>
</swiper-item>
</block>
</swiper>
<!--swiper组件 end-->
<!--测试swiper组件的属性配置-->
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
js
//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: true,
autoplay: true,
interval: 1500,
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
})
}
})
- 在js的data中设置需要轮播显示的图片数组。在结构中用wx:for循环输出image标签
- 通过js的data可直接设置自动播放（autoplay）、指示小圆点（indicatorDots），自动切换时间间隔（interval）和滑动动画时长（duration）。还有其他属性如指点颜色和滑动方向等，在官网文档中都有详细说明。
注意小坑：官网示例代码没有提供样式设定，image图片默认大小是320*240，显示出来图片宽度没有占满，底部还被遮住了部分。
不设置图片宽高效果
- 图片的宽高要在样式中控制，在图片标签中设置宽高无效。
- 图片缩放裁剪可以在image标签的mode属性控制，缩放裁剪有多种不同效果，详见微信小程序image标签官方文档
样式
/*swiper.wxss*/
image{
width:375px;
height:150px;
}
