微信小程序滑块视图容器 swiper

由 路飞 创建，youj 最后一次修改 2016-09-22 swiper滑块视图容器。属性名类型默认值说明最低版本indicator-dotsBooleanfalse是否显示面板指示点 indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0indicator-active-colorColor#000000当前选中的指示点颜色1.1.0autoplayBooleanfalse是否自动切换 currentNumber0当前所在页面的 index intervalNumber5000自动切换时间间隔 durationNumber500滑动动画时长 circularBooleanfalse是否采用衔接滑动 verticalBooleanfalse滑动方向是否为纵向 bindchangeEventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}  从公共库v1.4.0开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：autoplay自动播放导致swiper变化；touch用户划动引起swiper变化；其他原因将用空字符串表示。注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。swiper-item仅可放置在<swiper/>组件中，宽高自动设置为100%。示例代码：<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block></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"/> durationPage({ 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 }) }})