微信小程序實現輪播圖

1. 設置數據
我在 pages/test/test.js中添加如下數據

//test.js  
//獲取應用實例  
var app = getApp()
Page({
  data: {
    imgUrls: [
      {
        link: '/pages/index/index',
        url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
      }, {
        link: '/pages/logs/logs',
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
      }, {
        link: '/pages/test/test',
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 500,
    duration: 100,
    userInfo: {}
  },
  onLoad: function () {
    console.log('onLoad test');
  }
}) 

其中 imgUrls 是我們輪播圖中將要用到的 圖片地址和 跳轉鏈接
indicatgorRots 是否出現焦點

autoplay 是否自動播放

interval 自動播放間隔時間

duration 滑動動畫時間

1. 部署到頁面
   找到 文件 pages/test/test.wxml

<swiper indicator-dots="{{indicatorDots}}"  
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
      <block wx:for="{{imgUrls}}">  
        <swiper-item>  
           <navigator url="{{item.link}}" hover-class="navigator-hover">  
            <image src="{{item.url}}" class="slide-image" width="355" height="150"/>  
           </navigator>   
        </swiper-item>  
      </block>  
</swiper>  

注意： swiper 千萬不要在外面 加上任何標籤 例如 之類的 ，如果加了可能會導致輪播圖出不來
3. 添加頁面樣式
創建文件 pages/test/test.wxss

.slide-image{  
    width: 100%;  
}