Summarize the solution to the height problem of the swiper carousel in the sharing applet

The swiper tag in the mini program will have its own fixed height of 150px, but we actually hope that the height of this carousel can be dynamically changed, otherwise the height will be 150px on different devices, and styles will appear. question. This article will introduce to you the solution to this height problem. I hope it will be helpful to you!

1. Overview

The applet sets a fixed height of 150px for the carousel label , this style does not look very obvious on a large-screen device, but if you switch to a small-screen model such as iPhone5, the height of the picture will not reach 150px. Because the mode I set for the image is widthFix, the height of the image adapts according to the width. So the problem that needs to be solved is to make the height of the carousel change with the height of the picture.

2. Solution

1) Set an inline style for swiper and bind height to one Dynamic data, and set an id="swiper-image" to the internal image tag; and the image tag has an event: bindload. This event will be triggered when the image is loaded, and bind this event to the image

Official website documentation: https://developers.weixin.qq.com/miniprogram/dev/component/image.html

Note: Here Why don't I get the height of the image in the onLoad life cycle? This is because if I use some methods to get the image information in onLoad, I can only get the accurate information from the local image, but the image requested from the network , when the component is loaded, the image may not be requested, then the specific data cannot be obtained, so use the bindload event that comes with the image to obtain its specific information

2), declare a variable swiperHeight in the data in the index.js file to store the height of the swiper tag

3), Then write the bindload event handler function handleSwiperImageLoaded bound to the image, use the applet's wx.createSelectorQuery(), and after creating the node selector, call query.select('#swiper-image'). boundingClientRect().exec((res) => {}) method to obtain the specific information of the image. Finally, set the coverage of the obtained image to swiperHeight, so that it is dynamically bound to the swiper tag, and the page style display will be normal

3. Optimization

1). Since there are more than a dozen pictures I requested, this method will be called. More than ten times, so I just need to write an anti-shake function to solve this problem. I create a new hook.js file in the until.js directory under the root directory to store my encapsulated js function. I write the anti-shake function in it and export it

2), introduce the encapsulated anti-shake function in index.js in the home-music directory

3), in the handleSwiperImageLoaded method Just use the anti-shake function. This method will only be triggered after loading the last picture

[Related learning recommendations:Small program development Tutorial】

The above is the detailed content of Summarize the solution to the height problem of the swiper carousel in the sharing applet. For more information, please follow other related articles on the PHP Chinese website!