真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何使用小程序制作banner圖

這篇文章將為大家詳細(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

如何使用小程序制作banner圖

2.jpg

如何使用小程序制作banner圖

二:編寫xsml代碼(即html)

在這里我們要是用標(biāo)簽來進(jìn)行包裹,他有如下屬性:

如何使用小程序制作banner圖

這些屬性足夠我們使用,我們?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 () {
 
  },
 
 
})

好了,,我們來看一下最終效果:

如何使用小程序制作banner圖

關(guān)于“如何使用小程序制作banner圖”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。


本文題目:如何使用小程序制作banner圖
當(dāng)前URL:http://weahome.cn/article/pgiocd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部