這篇文章將為大家詳細(xì)講解有關(guān)如何使用小程序制作banner圖,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、牡丹江網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為牡丹江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
導(dǎo)語:
對于前端工程師來說,banner圖是前端開發(fā)中必不可少的一部分。但是對于缺少了DOM的小程序來說該如何實(shí)現(xiàn)banner圖呢?就像其他的框架封裝不同的banner圖的方法,小程序也封裝了banner的方法。
一:準(zhǔn)備工作
我用兩張圖吧,如下所示:
1.jpg
2.jpg
二:編寫xsml代碼(即html)
在這里我們要是用
這些屬性足夠我們使用,我們?yōu)榱耸莤sml頁面簡潔,所以我在這里使用了for循環(huán),將使用到的資源放進(jìn)js中進(jìn)行循環(huán)。而且為了使數(shù)據(jù)可進(jìn)行雙向綁定,所以他的屬性值我打算放到j(luò)s中進(jìn)行配置。我的xsml代碼如下:
三:js的配置
由于是雙向綁定,所以我們只要在js中進(jìn)行配置需要的參數(shù)即可。由于我的兩張圖片使用的是1.jpg和2.jpg,所以我只需要在js中進(jìn)行一個(gè)小小的循環(huán)即可,這個(gè)分情況而定,你么也可以把圖片的地址直接放到數(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)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, })
好了,,我們來看一下最終效果:
關(guān)于“如何使用小程序制作banner圖”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。