微信小程序之 Swiper（輪播圖）

1.邏輯層

mine.js

// pages/mine/mine.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    /*輪播圖 配置*/
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true, // 是否顯示面板指示點
    autoplay: true, // 是否自動切換
    interval: 5000, // 自動切換時間間隔
    duration: 500, // 滑動動畫時長
    circular: true, // 是否採用銜接滑動
    /*自定義輪播圖 配置*/
    slider: [
      { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },
      { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' },
      { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' }
    ],
    swiperCurrent: 0
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  
  },

  //輪播圖的切換事件  
  swiperChange: function (e) {
    //只要把切換後當前的index傳給<swiper>組件的current屬性便可  
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  //點擊指示點切換  
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  }
})

2.頁面佈局

mine.wxml

<!--pages/mine/mine.wxml-->
<view>
  <!-- 輪播圖 -->
  <swiper class="swiper" indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <block wx:for="{{imgUrls}}" wx:key="id">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定義輪播圖 -->
  <view class="swiper-container">  
    <swiper circular="true" autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">  
      <block wx:for="{{slider}}" wx:key="unique">  
        <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}">  
          <image src="{{item.picUrl}}" class="img"></image>  
        </swiper-item>  
      </block>  
    </swiper>  
    <view class="dots">  
      <block wx:for="{{slider}}" wx:key="unique">  
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>  
      </block>  
    </view>  
  </view>
</view>

3.樣式

mine.wxss

/* pages/mine/mine.wxss */
/**輪播圖 start**/
.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}
/**輪播圖 end**/
/**自定義輪播圖 start**/
.swiper-container{  
  position: relative;  
}  
.swiper-container .swiper{  
  height: 400rpx;  
}  
.swiper-container .swiper .img{  
  width: 100%;  
  height: 100%;  
}  
.swiper-container .dots{  
  position: absolute;  
  right: 40rpx;  
  bottom: 20rpx;  
  display: flex;  
  justify-content: center;  
}  
.swiper-container .dots .dot{  
  margin: 0 10rpx;  
  width: 28rpx;  
  height: 28rpx;  
  background: #fff;  
  border-radius: 50%;  
  transition: all .6s;  
  font: 300 18rpx/28rpx "microsoft yahei";  
  text-align: center;  
}  
.swiper-container .dots .dot.active{  
  background: #f80;  
  color:#fff;  
}
/**自定義輪播圖 end**/

4.效果圖

5.參數