javascript – swiper.js funktioniert nicht gut, wenn autoHeight eingestellt wird, wenn die Inhaltshöhe kleiner als die Bildschirmhöhe ist

Question

Verwenden Sie swiper.js, um das Wechseln von Tab-Elementen zu implementieren, aber die Höhe jedes Tab-Elements ist unterschiedlich und die Daten werden asynchron geladen.
AutoHeight: true ist für die adaptive Höhe des Swiper-Containers festgelegt, es wird jedoch festgestellt, dass bei der Inhaltshöhe

1

0

0

phpcn_u1582

Antwort

Antworte allen(1)

Ich werde antworten Schließen

小葫芦2017-05-19 10:45:35 1 Etage

我之前也遇到过这个问题，因为swiper容器是个p盒子，所以会按各个子tab中高度最大的，作为自己的高度。所以只用css不行哦，要加点js判断。

解决方法：
1.首先监听tab切换事件的回调，在tab切换完成以后，获取当前tab内容的高度，然后js把外面的swiper容器设置成当前内容高度。
2.其次动态内容加载完成以后，原理也一样，也去手动获取内容高度，然后设置外面容器的height为当前内容高度。

具体代码不在身边，可以迟点贴给你，不过思路有了，相信你肯定可以实现出来的哦！

Wie +0

Antwort hinzufügen 关闭回复

phpcn_u1582

Antwort

Answer 1

我之前也遇到过这个问题，因为swiper容器是个p盒子，所以会按各个子tab中高度最大的，作为自己的高度。所以只用css不行哦，要加点js判断。

解决方法：
1.首先监听tab切换事件的回调，在tab切换完成以后，获取当前tab内容的高度，然后js把外面的swiper容器设置成当前内容高度。
2.其次动态内容加载完成以后，原理也一样，也去手动获取内容高度，然后设置外面容器的height为当前内容高度。

具体代码不在身边，可以迟点贴给你，不过思路有了，相信你肯定可以实现出来的哦！