溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用小程序制作banner圖，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
導語：
對于前端工程師來說，banner圖是前端開發中必不可少的一部分。但是對于缺少了DOM的小程序來說該如何實現banner圖呢？就像其他的框架封裝不同的banner圖的方法，小程序也封裝了banner的方法。
一：準備工作
我用兩張圖吧，如下所示：
1.jpg
2.jpg
二：編寫xsml代碼（即html）
在這里我們要是用<swiper></swiper>標簽來進行包裹，他有如下屬性：
這些屬性足夠我們使用，我們為了是xsml頁面簡潔，所以我在這里使用了for循環，將使用到的資源放進js中進行循環。而且為了使數據可進行雙向綁定，所以他的屬性值我打算放到js中進行配置。我的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中進行配置需要的參數即可。由于我的兩張圖片使用的是1.jpg和2.jpg，所以我只需要在js中進行一個小小的循環即可，這個分情況而定，你么也可以把圖片的地址直接放到數組里面；最后改好了之后記得setData一下，，不然沒效果，js代碼如下：
Page({
/**
* 頁面的初始數據
*/
data: {
mode:"scaleToFill",
arr:[],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 1000,
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
var array = this.data.arr
for (let i = 1; i < 3; i++) {
array.push("img/" + i + ".jpg")
}
this.setData({ arr: array})
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
})好了，，我們來看一下最終效果：
關于“如何使用小程序制作banner圖”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
