Use a small program to create a banner image

Introduction:

For front-end engineers, banner diagrams are an essential part of front-end development. But how to implement banner graphics for small programs that lack DOM? Just like other frameworks encapsulate different banner diagram methods, mini programs also encapsulate banner methods. Let’s take a look at the specific implementation methods.

(Learning video sharing: Introduction to Programming)

1: Preparation work

I will use two pictures, as shown below:

1.jpg                      

2.jpg

Two: Write xsml code (i.e. html)

If we use the tag here to wrap it, it has the following attributes:

##These attributes are enough for us to use. In order to make the xsml page concise, I used a for loop here to put the used resources into js for looping. And in order to enable two-way binding of data, I plan to put its attribute values ​​​​in js for configuration. My xsml code is as follows:

<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>

Three: js configuration

Since it is a two-way binding, we only need to configure the required parameters in js. Since my two pictures use 1.jpg and 2.jpg, I only need to perform a small loop in js. This depends on the situation. You can also put the address of the picture directly in In the array; remember to setData after the final change, otherwise it will have no effect. The js code is as follows:

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 () {
 
  },
 
 
})

Okay, let’s take a look at the final effect:

Related recommendations:

Mini Program Development Tutorial

The above is the detailed content of Use a small program to create a banner image. For more information, please follow other related articles on the PHP Chinese website!