小程序實踐（二）：swiper組件實現輪播圖效果

本文轉載自查看原文 2018-06-30 23:16 645 微信小程序

swiper組件類似於Android中的ViewPager，實現類似輪播圖的效果，相對於Android的Viewpager,swiper實現起來更加方便，快捷。

效果圖：

首先看下swiper支持的屬性：

------------------------------------------------------------------------------------

具體實現輪播功能：

一、添加輪播圖片素材

　　在項目根目錄下新建一個目錄用於存儲圖片資源，目錄名隨意

二、頁面目錄下的js文件添加數據源

　　　在data屬性里添加imgs列表，列表item項為圖片在項目中的位置（關鍵：紅色加粗部分代碼）

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    imgs:["../../images/aaa.jpg","../../images/bbb.jpg","../../images/ccc.jpg"]
  },

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

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

　三、視圖文件構建

　　 1、在頁面目錄下的wxml 文件中編寫代碼

用到知識點：列表渲染、swiper組件

<view class="container">
  <view >
    <swiper indicator-dots='true' autoplay='true' interval='3000' duration='200' circular='true' bindtap='clickSwiper'>
      <block wx:for="{{imgs}}" wx:key:="*this">
        <swiper-item>
          <image src="{{item}}"  class="slide-image" mode='aspectFill' data-index="{{index}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>