應用中最常見的就是輪播圖了，今兒個就講講微信小程式中輪播圖的使用

輪播圖，不外乎倆個要素，跳轉連結 和 圖片地址

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: 5000,
    duration: 1000,
    userInfo: {}
  },
  onLoad: function () {
    console.log('onLoad test');
  }
})
 

indicatgorRots 是否出現焦點

autoplay  是否自動播放

interval  自動播放間隔時間

duration 滑動動畫時間

2. 部署到頁面

找到 檔案 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>
 

3. 新增頁面樣式

建立檔案 pages/test/test.wxss

.slide-image{
    width: 100%;
}

看效果