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

時間 2019-11-13

標籤程序實踐 swiper 組件實現效果简体版

原文原文鏈接

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

效果圖：html

首先看下swiper支持的屬性：小程序

------------------------------------------------------------------------------------ide

具體實現輪播功能：函數

1、添加輪播圖片素材
post

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

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

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

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 () {
    
  }
})

　3、視圖文件構建component

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

用到知識點：列表渲染、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>