swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item

与 swiper 组件结合使用，宽高自动设置为100%。

easing-function 的合法值

示例代码：

<!--pages/component/pages/swiper/swiper.mcml-->
<view class="container">
  <view class="statement">滑块视图容器。其中只可放置swiper-item组件，否则会导致未知行为。</view>
  <swiper indicator-dots="{{indicatorDots}}"
  id="swiper-id"
  skip-hidden-item-layout="{{true}}"
  indicator-color="{{indicatorColor}}"
  indicator-active-color="{{indicatorActiveColor}}"
  autoplay="{{autoplay}}"
  current="{{current}}"
  interval="{{interval}}"
  duration="{{duration}}"
  circular="{{circular}}"
  vertical="{{vertical}}"
  previous-margin="{{margin}}"
  next-margin="{{margin}}"
  easing-function="{{easingFunction}}"
  display-multiple-items="{{displayMultipleItems}}"
  snap-to-edge="{{snapToEdge}}"
  bindchange="bindchange"
  bindtransition="bindtransition"
  bindanimationfinish="bindanimationfinish"
  >
    <swiper-item id="{{item.index}}" mc:for="{{items}}" class="view-item{{item.index}}">{{index + 1}}</swiper-item>
    </swiper>

   <view style="display:flex; flex-direction:column;">
      <button bindtap="setIndicatorDots" >显示面板指示点 : {{indicatorDots}}</button>
      <button bindtap="setIndicatorColor">指示点颜色 : {{indicatorColor}}</button>
      <button bindtap="setIndicatorActiveColor">选中的指示点颜色 : {{indicatorActiveColor}}</button>
      <button bindtap="setAutoPlay">自动切换 : {{autoplay}}</button>
      <button bindtap="setCurrent" >当前滑块的序号 : {{current}}</button>
      <button bindtap="setInterval" >自动切换时间间隔 : {{interval}}</button>
      <button bindtap="setEasingFunction" > 动画类型: {{easingFunction}}</button>
      <button bindtap="setDuration" >滑动动画时长 : {{duration}}</button>
      <button bindtap="setCircular" >采用衔接滑动 : {{circular}}</button>
      <button bindtap="setVertical" >滑动方向是否纵向 : {{vertical}}</button>
      <button bindtap="setMargin" > 前后边距: {{margin}}</button>
      <button bindtap="setSnapToEdge" > 边距是否应用到首尾: {{snapToEdge}}</button>
      <button bindtap="setDisplayMultipleItems"> 显示的item数量: {{displayMultipleItems}}</button>
    </view>
    <view class="cssname">bindchange：current 改变时会触发 change 事件, 参数event.detail</view>
    <text space="nbsp" user-select="true" class="scrollDetail">{{changeDetail}}</text>
    <view class="cssname">bindtransition：swiper-item 的位置发生改变时会触发 transition 事件, 参数event.detail</view>
    <text space="nbsp" user-select="true" class="scrollDetail">{{transitionDetail}}</text>
    <view class="cssname">bindanimationfinish：动画结束时会触发 animationfinish 事件, 参数event.detail</view>
    <text space="nbsp" user-select="true" class="scrollDetail">{{animationfinishDetail}}</text>

</view>

// pages/component/pages/swiper/swiper.js
Page({
  data: {
    items : [{
      index: 1, skip: false
    },{
      index: 3, skip: false
    },{
      index: 4, skip: true
    },{
      index: 5, skip: false
    },{
      index: 6, skip: false
    }],
    current : 0,
    indicatorDots : true,
    indicatorColor : 'rgba(0, 0, 0, 0.3)',
    indicatorActiveColor : 'rgb(0, 0, 0)',
    autoplay : false,
    interval : 5000,
    duration : 500,
    circular : false,
    vertical : false,
    margin : 0,
    easingFunction : 'default',
    displayMultipleItems : 1,
    snapToEdge : false,
    bindchange : ''
  },
  setIndicatorDots: function () {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  setIndicatorColor: function(){
    var c1 = parseInt(Math.random() * 255);
    var c2 = parseInt(Math.random() * 255);
    var c3 = parseInt(Math.random() * 255);
    this.setData({
      indicatorColor: 'rgba(' + [c1, c2, c3, 0.3].join(',') + ')'
    })
  },
  setIndicatorActiveColor: function () {
    var c1 = parseInt(Math.random() * 255);
    var c2 = parseInt(Math.random() * 255);
    var c3 = parseInt(Math.random() * 255);
    this.setData({
      indicatorActiveColor: 'rgb(' + [c1, c2, c3].join(',') + ')'
    })
  },
  setAutoPlay: function(){
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  setCurrent: function(){
    var index = this.data.current + 1;
    if(index > this.data.items.length){
      index = 0;
    }
    this.setData({
      current: index
    })
  },
  setInterval: function(){
    var m = 5000, n = 1000;
    var interval = Math.floor(Math.random() * (m - n + 1)) + n
    this.setData({
      autoplay: true,
      interval: interval
    });
  },
  setDuration: function (){
    var m = 10, n = 900;
    var duration = Math.floor(Math.random() * (m - n + 1)) + n
    this.setData({
      autoplay: true,
      duration: duration
    });
  },
  setCircular: function(){
    this.setData({
      circular: !this.data.circular
    });
  },
  setVertical: function(){
    this.setData({
      vertical: !this.data.vertical
    })
  },
  setMargin: function(){
    this.setData({
      margin: Math.floor(Math.random() * 20)
    })
  },
  setEasingFunction: function(){
    var functions = ['default', 'linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'];
    var curIndx = 0;
    for(var i = 0; i < functions.length; i++){
      if(this.data.easingFunction == functions[i]){
        curIndx = i;
        break;
      }
    }
    curIndx += 1;
    if(curIndx >= functions.length){
      curIndx = 0;
    }
    this.setData({
      easingFunction: functions[curIndx]
    })

  },
  setSnapToEdge: function(){
    this.setData({
      snapToEdge: !this.data.snapToEdge
    });
  },
  setDisplayMultipleItems: function(){
    var itemcount = ++this.data.displayMultipleItems;
    console.log(itemcount)
    if(itemcount > this.data.items.length){
      itemcount = 1;
    }
    this.setData({
      displayMultipleItems: itemcount
    })
  },
  bindchange: function(e){
    this.setData({
      current: e.detail.current,
      changeDetail: JSON.stringify(e, null, 2)
    })
  },
  bindtransition: function(e){
    this.setData({
      transitionDetail: JSON.stringify(e, null, 2)
    })
  },
  bindanimationfinish: function(e){
    this.setData({
      animationfinishDetail: JSON.stringify(e, null, 2)
    })
  }
})

/* pages/component/pages/swiper/swiper.mcss */
swiper-item{
  text-align: center;
}

button{
  width: 100%;
  font-size: 16px;
}