導語：
對於前端工程師來說，banner圖是前端開發中不可或缺的一部分。但是對於缺少了DOM的小程式來說該如何實作banner圖呢？就像其他的框架封裝不同的banner圖的方法，小程式也封裝了banner的方法，下面我們來看看具體實作方法。
（學習影片分享：程式設計入門）
一：準備工作
我用兩張圖吧，如下：
1.jpg
2.jpg
二：寫出xsml程式碼（即寫入html）
##二：寫出html）
這些屬性足夠我們使用，我們為了是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圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
