Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use Mini Program to make banner pictures. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Introduction:

For front-end engineers, banner diagrams are an essential part of front-end development. But for Mini Program without DOM, how to implement banner diagram? Like other frameworks that encapsulate different banner diagrams, Mini Program encapsulates banner's method.

One: preparatory work

Let me use two pictures, as shown below:

1.jpg

2.jpg

Second, write xsml code (i.e. html)

If we use a label to package here, it has the following attributes:

These properties are enough for us to use, and we want the xsml page to be concise, so I use a for loop here to loop the resources used into the js. And in order to make the data two-way binding, so his property values I intend to put into js for configuration. My xsml code is as follows:

Third: the configuration of js

Because it is a two-way binding, we only need to configure the required parameters in js. Since my two images use 1.jpg and 2.jpg, I only need to do a small loop in js. Depending on the situation, you can also put the address of the image directly into the array. Remember to setData after the final correction, otherwise it won't work. The js code is as follows:

Page (initial data of {/ * page * / data: {mode: "scaleToFill", arr: [], indicatorDots: true, autoplay: true, interval: 2000, duration: 1000,}, / * Lifecycle function-listening page loading * / onLoad: function (options) {var array = this.data.arr for (let I = 1; I < 3) Array.push +) {array.push ("img/" + I + ".jpg")} this.setData ({arr: array})}, / * Lifecycle function-first rendering of listening page completed * / onReady: function () {}, / * Lifecycle function-listening page display * / onShow: function () {} / * Lifecycle function-- listening to Page Hidden * / onHide: function () {}, / * Lifecycle function-listening to Page unloading * / onUnload: function () {}, / * Page related event handling function-listening for user drop-down actions * / onPullDownRefresh: function () {} / onReachBottom: function () {}, / * user clicks on the upper right corner to share * / onShareAppMessage: function () {}, / * Handler of pull bottom event on the page * / onReachBottom: function () {} / * Page-related event handling function-- listening for user drop-down actions * / onPullDownRefresh: function () {},})

All right, let's take a look at the end result:

This is the end of the article on "how to use Mini Program to make banner diagrams". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.