javascript - swiper.js does not work well when setting autoHeight when the content height is smaller than the screen height
phpcn_u15822017-05-19 10:43:35
0
1
522
Use swiper.js to implement tab item switching, but the height of each tab item is different and the data is loaded asynchronously AutoHeight: true is set for the adaptive height of swiper-container, but it is found that when the content height I changed it through js settings but I can still slide down the blank area. How to solve it
I have encountered this problem before. Because the swiper container is a p box, it will use the largest height among the sub-tabs as its own height. So just using css is not enough, you need to add some js to judge.
Solution: 1. First listen to the callback of the tab switching event. After the tab switching is completed, obtain the height of the current tab content, and then js sets the external swiper container to the current content height. 2. Secondly, after the dynamic content is loaded, the principle is the same. You also need to manually obtain the content height, and then set the height of the outer container to the current content height.
I don’t have the specific code with me, so I can post it to you later, but I have the idea, and I believe you can definitely implement it!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I have encountered this problem before. Because the swiper container is a p box, it will use the largest height among the sub-tabs as its own height. So just using css is not enough, you need to add some js to judge.
Solution:
1. First listen to the callback of the tab switching event. After the tab switching is completed, obtain the height of the current tab content, and then js sets the external swiper container to the current content height.
2. Secondly, after the dynamic content is loaded, the principle is the same. You also need to manually obtain the content height, and then set the height of the outer container to the current content height.
I don’t have the specific code with me, so I can post it to you later, but I have the idea, and I believe you can definitely implement it!