用微信小程序如何實現(xiàn)banner輪播圖

這篇文章給大家分享的是有關(guān)用微信小程序如何實現(xiàn)banner輪播圖的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

用微信小程序?qū)崿F(xiàn)banner輪播圖

一：準(zhǔn)備工作

我用兩張圖吧，如下所示：

二：編寫xsml代碼（即html）

在這里我們要是用<swiper></swiper>標(biāo)簽來進行包裹，他有如下屬性：

這些屬性足夠我們使用，我們?yōu)榱耸莤sml頁面簡潔，所以我在這里使用了for循環(huán)，將使用到的資源放進js中進行循環(huán)。而且為了使數(shù)據(jù)可進行雙向綁定，所以他的屬性值我打算放到j(luò)s中進行配置。我的xsml代碼如下：

<swiper indicator-dots="{{indicatorDots}}" 
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true"> 
      <block wx:for="{{arr}}"> 
        <swiper-item> 
            <image src="{{item}}" class="slide-image" width="355" height="150"/> 
        </swiper-item> 
      </block> 
</swiper>

三：js的配置

由于是雙向綁定，所以我們只要在js中進行配置需要的參數(shù)即可。由于我的兩張圖片使用的是1.jpg和2.jpg，所以我只需要在js中進行一個小小的循環(huán)即可，這個分情況而定，你么也可以把圖片的地址直接放到數(shù)組里面；最后改好了之后記得setData一下，，不然沒效果，js代碼如下：

Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    mode:"scaleToFill",
    arr:[],
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 1000,
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    var array = this.data.arr
    for (let i = 1; i < 3; i++) {
      array.push("img/" + i + ".jpg")
    }
    this.setData({ arr: array})
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
       
      
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
 
  },
 
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
 
  },
 
 
})

好了，，我們來看一下最終效果：

感謝各位的閱讀！關(guān)于“用微信小程序如何實現(xiàn)banner輪播圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！