微信小程式五（建立輪播圖）

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

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

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');
  }
})

其中 imgUrls 是我們輪播圖中將要用到的 圖片地址和 跳轉連結

indicatgorRots 是否出現焦點

autoplay  是否自動播放

interval  自動播放間隔時間

duration 滑動動畫時間

更多樣式編輯請參看文件  https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

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>

注意： swiper 千萬不要在外面  加上任何標籤 例如 <view> 之類的 ，如果加了可能會導致輪播圖出不來

3. 新增頁面樣式

建立檔案 pages/test/test.wxss

.slide-image{
    width: 100%;
}

加上上面的樣式可以使 輪播圖的寬度達到100% 然後更漂亮點，當然可以根據自己的喜好羅！

看效果