Antd-mobile carousel initial height problem

problem description

The height of the

antd-mobile carousel component is very small when initialized, and it will display normally only when you switch to the second picture. What should I do with it?

the environmental background of the problems and what methods you have tried

  1. I set the style in element a with the class name, and there is no problem of giving a fixed height. However, since it is a mobile development, the width of the device is uncertain, and the focus map should be adaptive, so its height cannot be written down.
  2. I get these an elements with ref and set the height for them in componentDidMount. If you write it to a fixed value, you can see that the height setting is successful in F12, but the problem still exists. If the height is calculated from the aspect ratio of the picture and the width of the focus map, the setting is invalid.
  3. set frameOverflow= "visible" to carousel. After loading, you can see the complete first picture, but at this time the screen can swipe to the right to see all the focus images.
    4. A setHeight method is written in the
  4. component, which is called in the inline style of element a, and it doesn"t work.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
Antd-mobile javascript visual-studio-code react.js
Nov.19,2021

{window.dispatchEvent (new Event ('resize'));}} / >
provenance

I also encountered the same problem today. At first, I searched here and saw that the above two answers were unreliable.
tried for several hours without solving the problem, then looked closely at the official example and found the problem.

you need to listen to onLoad, in the img tag. When the image is loaded, the resize event is triggered to the Carousel component, and the component sets the height of the ul according to the actual width and height of the loaded image.

The main reason for the

pit is that I read the example without paying attention to the details. Of course, it is also related to the fact that the annotation in the example is in English, "fire window resize event to change height". When I read it, I didn't pay attention to the English prompt.

I set the height of the ul in Carousel . As for setting a timer, it is because the component will set the height of the ul to 16px, and the height value written by myself is invalid if the timer is not turned on.
but the height calculated by myself is a little different from that of the assembly. When you automatically switch to the second picture, the height will change a little, but it's better than not seeing the complete picture when you load it. For the time being, I have not found a better solution, and I would like to ask your experts for advice. 

 componentDidMount() {
    setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, 0);
  },

Previous: How to zoom a picture based on mouse position through translate and scale,?

Next: Nginx load balancer WeChat Pay error code curl7

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2bade-4003f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2bade-4003f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?