javascript - swiper.js在内容高度小于屏幕高度的时候设置autoHeight不好用

问题描述

问 题

使用swiper.js实现选卡项切换切换 但是各个选卡项的高度是不一样的 数据也是异步加载进去的
为了swiper-container自适应高度 设置了autoHeight：true 但是发现当内容高度<屏幕高度的时候这个属性就不起作用了
通过js设置改变了 但是仍能向下滑动空白区域请问怎么解决

解决方案

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

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

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

这篇关于javascript - swiper.js在内容高度小于屏幕高度的时候设置autoHeight不好用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！