微信小程序 swiper 应用

//js

var imgUrls = [
  { image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" },
  { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" },
  { image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }
]

Page({
  data: {
    imgUrls: imgUrls,
    autoplay: true,//是否自动切换
    indicatorDots: true,//是否显示圆点
    interval: 5000,//自动切换间隔
    duration: 500, //滑动动画时长
    indicatorColor: "blue",//滑动圆点颜色
    indicatorActiveColor: "yellow", //当前圆点颜色
    current: 2, //当前所在页面的 index
    circular: true  //是否采用衔接滑动
    //其中只可放置<swiper-item/>组件，否则会导致未定义的行为。
  }, imageLoad: function () {
    //bindload 图片加载的时候自动设定宽度
    this.setData({
      imageWidth: wx.getSystemInfoSync().windowWidth
    })
  }, swiperChange: function () {
    console.log("current 改变时会触发 change 事件")
  }
})

//wxml

<swiper indicator-dots="{{indicatorDots}}" current="{{current}}" circular="{{circular}}" indicator-active-color="{{indicatorActiveColor}}" indicator-color="{{indicatorColor}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
  <block wx:for="{{imgUrls}}" wx:key="image">
    <swiper-item>
      <image src="{{item.image}}" model="aspectFit" style="width: {{imageWidth}}px;" bindload="imageLoad" />
    </swiper-item>
  </block>
</swiper>