Swiper的使用

.js檔案

var imgUrls = [=
    { image: "http://www.padmag.cn/wp-content/uploads/Unforgiven.jpg" },
  { image: "http://www.padmag.cn/wp-content/uploads/Desire.jpg" },
  { image: "http://www.padmag.cn/wp-content/uploads/No_Goodbye.jpg" },
  { image: "http://www.padmag.cn/wp-content/uploads/Look_Away.jpg" }
]
Page({
  data: {
imgUrls: imgUrls,
autoplay: true
 
,//是否自動切換  
indicatorDots: true,//是否顯示圓點  
interval: 5000,//自動切換間隔  
duration: 500, //滑動動畫時長  
indicatorColor: "blue",//滑動圓點顏色  
indicatorActiveColor: "white", //當前圓點顏色  
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>