10.swiper

swiper组件具有提供视图容器滑动的功能，组件所支持的属性如下 ：

 

例子 

<swiper 
  indicator-dots="{{indicatorDots}}"
  indicator-color="{{indicatorColor}}"
  indicator-active-color="{{indicatorActiveColor}}"
  autoplay="{{autoPlay}}"
  current="{{current}}"
  interval="{{interval}}"
  duration="{{duration}}"
  circular="{{circular}}"
  vertical="{{vertical}}"
  bindchange="change"
  bindanimationfinish="animationfinish"
>
  <swiper-item wx:for="{{imagesList}}" wx:key="img">
    <image src="{{item}}" ></image>
  </swiper-item>
</swiper>

Page({

  data: {
    imagesList : [
      '../../images/1.jpg',
      '../../images/2.jpg',
      '../../images/3.jpg',
    ],
    indicatorDots : true,
    indicatorColor : 'green',
    indicatorActiveColor : 'red',
    autoPlay : true,
    current : 0,
    interval : 2000,
    duration : 250,
    circular : true,
    vertical : true,
  },

  change(e){
    console.log(e.detail.current); //打印当前是第几张图片
  },

  animationfinish(){
    console.log('动画结束');
  }

})

image{
  width: 100%;
  height: 320rpx;
}