分享好友 教程首页 教程搜索 频道列表

swiper高度自适应

2023-03-28 22:011990
+关注2
核心提示:最近在写项目中用到swiper做tab切换,因每个tab页的内容不一样,有的内容多,就会...

最近在写项目中用到swiper做tab切换,因每个tab页的内容不一样,有的内容多,就会高一些,而有的内容少,会出现白屏,所以需要自适应高度,根绝官方API在swiper中添加 autoHeight: true ,但是并没有什么作用,第一次显示会显示异常,等切换后才会正常,就百度了其他的方式。

尝试过:

// .swiper-wrapper {

// height: auto !important;

// }

以及:

// .swiper-slide {

// overflow: hidden;

// }


// .swiper-slide-active {

// overflow: auto !important;

// }


然而,都没有用。


最后找到了一个新方法,可以使用

自适应高度的实现,在自己的css中添加:

.swiper-slide{height:1px}     
.swiper-slide-active { height:auto}


本文标签: #swiper #高度自适应
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

用swiper做手机端滑动导航栏

    用代码测试

网络转载 JavaScript教程2022-05-25

swiper根据图片切换不同的背景色

    用代码测试

网络转载 JavaScript教程2022-05-25

swiper文字垂直滚动(公告栏)

    需用代码测试

小黑 JavaScript教程2022-03-26

swiper鼠标移入停止滚动 移出开始滚动

    效果用代码测试

网络转载 JavaScript教程2022-02-04

下一篇
我来说两句
抢沙发