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

Most people do not understand the knowledge points of this article "how Mini Program makes commodity list streaming layout", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Mini Program how to make commodity list streaming layout" article.

Flow layout concept flow layout is also known as percentage layout the element width, height, margin,padding no longer use a fixed value, use a percentage, so that the element width, height, margin,padding will adjust according to the size of the page at any time to adapt to the current page.

Let's first look at the effect:

As shown in the image above, in order to get a more intuitive view, I set a red dotted border for the layout, and the whole page is laid out according to the percentage of elements.

Look directly at the code:

Xxx.wxml {{item.name}} ¥{{item.newprice}}

¥{{item.oldprice}}

{{item.discount}} discount

{{item.name}} ¥{{item.newprice}}

¥{{item.oldprice}}

{{item.discount}} discount

By looking at the class tag, it is found that there are two img_item, so the data is loaded left and right.

Xxx.jsPage ({data: {scrollH: 0, imgWidth: 0, loadingCount: 0, images: [], col1: [], col2: []}, onLoad: function () {wx.getSystemInfo ({success: (res) = > {let ww = res.windowWidth; let wh = res.windowHeight; let imgWidth = ww * 0.48; let scrollH = wh This.setData ({scrollH: scrollH, imgWidth: imgWidth}); / / load the first set of images this.loadImages ();}}, onImageLoad: function (e) {let imageId = e.currentTarget.id; let oImgW = e.detail.width; / / original width of the picture let oImgH = e.detail.height / / the original height of the picture let imgWidth = this.data.imgWidth; / / the width of the picture setting let scale = imgWidth / oImgW; / / scale calculation let imgHeight = oImgH * scale; / / Adaptive height let images = this.data.images; let imageObj = null; for (let I = 0; I < images.length; iTunes +) {let img = images [I] If (img.id = imageId) {imageObj = img; break;}} imageObj.height = imgHeight; let loadingCount = this.data.loadingCount-1; let col1 = this.data.col1; let col2 = this.data.col2; / / determine whether the current picture is added to the left column or the right column if (col1.length

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.