Wechat applet learning notes swiper height to achieve page adaptation

WeChat shuffling diagram of small programs generally use swiper slider view containers to make, the official document is as follows: swiper | WeChat open document

First, swiper tags have default widths and heights.

width:100%;
height:150px;
Copy the code

In the case of swiper, the image will not always match the length and width of the swiper image, and the screen size will vary from model to model, so to make the image pleasing to the eye, you can use the following steps to achieve height adaptation of swiper.

Step 1: Get the width and height of the image to be displayed in the rotation diagram

For example,

width:590px;
height:470px;
Copy the code

Step 2: Define the height of swiper proportionally (default width is 100%)

According to the definition of equal proportion, we can get the following equation:

Swiper width/swiper height = width of picture displayed/height of picture displayed

reduction

Swiper height = swiper width * height of picture displayed/width of picture displayed

Step 3: Modify the style of swiper

The values of expressions in WXSS are computed using calC (expressions)

swiper{
    width:100%;
    height:calc(100vw*470/590);
}
Copy the code

Note: calc, short for calculate, is a new feature in CSS3 that specifies the length of an element. It also works in WXSS. Vw: Percentage of window width (1vw means 1% window width)

Step 4: Modify the style and properties of the image

In WXSS, the image tag has a default size, which is 320 * 240. We need to change the width attribute of the image tag to 100% first

image{
    width: 100%;
}
Copy the code

Then change the value of the mode property to widthFix, that is, the zoom mode, the width is unchanged, the height automatically changes, leaving the original image aspect ratio unchanged.

<image mode="widthFix" src="//imgcps.jd.com/ling4/3195185/5LyB5Lia5bm05Lya5a2j/5LyB5Lia5LiT5Lqr5L2O6IezNeaKmA/p-5bd8253082acdd181d02fa06/2814ee 6e/cr/s/q.jpg" /></swiper-item>Copy the code

The renderings are as follows

Please give me more advice if you have any problems.