4.2 swipe

这是滚动窗口控件。
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
这个控件有非常多的属性:
属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse否是否显示面板指示点1.0.0
indicator-colorcolorrgba(0,0,0,.3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
currentnumber0否当前所在滑块的index1.0.0
intervalnumber5000否自动切换时间间隔1.0.0
durationnumber500否滑动动画时长1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0
verticalbooleanfalse否滑动方向是否为纵向1.0.0
previous-marginstring"0px"否前边距，可用于露出前一项的一小部分，接受px和rpx值1.9.0
next-marginstring"0px"否后边距，可用于露出后一项的一小部分，接受px和rpx值1.9.0
snap-to-edgeboolean"false"否当swiper-item的个数大于等于2，关闭circular并且开启previous-margin或next-margin的时候，可以指定这个边距是否应用到第一个、最后一个元素2.12.1
display-multiple-itemsnumber1否同时显示的滑块数量1.9.0
easing-functionstring"default"否指定swiper切换缓动动画类型2.6.5
bindchangeeventhandle
否current改变时会触发change事件，event.detail={current,source}1.0.0
bindtransitioneventhandle
否swiper-item的位置发生改变时会触发transition事件，event.detail={dx:dx,dy:dy}2.4.3
bindanimationfinisheventhandle
否动画结束时会触发animationfinish事件，event.detail同上1.9.0
这是一个例子的wxml：
<view class="page-section page-section-spacing swiper">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
        <view class="swiper-item {{item}}">
        </view>
        </swiper-item>
    </block>
    </swiper>
</view>
这是对应的js文件：
Page({
    data:{
        background:['demo-text-1','demo-text-2','demo-text-3'],
        indicatorDots:true,
        vertical:false,
        autoplay:false,
        interval:2000,
        duration:500
    },
    changeIndicatorDots(){
        this.setData({
            indicatorDots:!this.data.indicatorDots
        })
    },
    changeAutoplay(){
        this.setData({
            autoplay:!this.data.autoplay
        })
    },
    intervalChange(e){
        this.setData({
            interval:e.detail.value
        })
    },
    durationChange(e){
        this.setData({
            duration:e.detail.value
        })
    }
})