“This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The swiper TAB in the widget will have its own fixed height of 150px, but we actually want the rotation map to have a dynamic height change, otherwise it will be 150px on different devices and there will be style issues. In this article I will address that question

1, an overview of the

The applet sets the rotation TAB to a fixed height of 150px. This pattern may not look obvious on a larger screen, but on a smaller model like the iphone5, the image height will not reach 150px. Because I set the mode of the image to widthFix, I made the height of the image adapt to the width. Therefore, the problem to be solved is to make the height of the rotation chart follow the height of the picture to change.

2, solve

  1. Set an in-line style for swiper, bind height to a dynamic data, and set an id=”swiper-image” for the inner image tag; And image tag has an event: bindload, this event is a picture when loading is completed will trigger, and put this event for pictures, website document: developers.weixin.qq.com/miniprogram… .

    Note: The reason why I don’t get the height of the image in the onLoad life cycle is because if I use some methods to get the image information in the onLoad, I can only get accurate information from the local image, but the image requested from the network may not be received after the component is loaded. Therefore, specific data cannot be obtained, so the bindload event of image is used to obtain its specific information

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

  3. Then write the image-bound Bindload event handler handleSwiperImageLoaded, using the appletwx.createSelectorQuery(), after the node selector is createdquery.select('#swiper-image').boundingClientRect().exec((res) => {})Method to obtain the specific information of the image. Finally, set the coverage of the image to swiperHeight. This will dynamically bind to the swiper tag and the page will display normally

3, optimize

  1. Here because I request a total of a dozen images, then this method will be called a dozen times, so I write a tremble function to solve the problem. I created a hook. Js file in the “until
  2. In the home-music directory index.js to introduce packaged anti – shake function
  3. Just use the anti-shake function in the handleSwiperImageLoaded method, which will not trigger until the last image is loaded