swiper高度自适应autoHeight出现元素消失问题

文章讨论了Swiper在内容高度不同时如何处理,autoHeight可能导致的问题,如元素消失和无效。提供了两种解决方案:JS中的v-if策略和CSS重置高度后动态设置。提示,组件强刷新不能解决此问题。
摘要由CSDN通过智能技术生成

swiper各种slide会因为内容高度有不同要求,那么就需要用到自适应autoHeight的设置

但是会出现各种问题,比如无效,比如出现元素消失问题,一般的是因为生命周期中元素渲染滞后引起界面异常

如果有元素显示存在判断逻辑情况,一般会存在以上问题,以下有几种解决方案仅供参考

方式一:JS

v-if 

 这种要开启autoHeight,让显示最高且高度始终不变的元素先赋值true方便autoHeight定位高度,最后根据逻辑再赋值,如果本身要先显示最高且固高的元素,这个是再好不为过的方式,如果有不固高元素或者非最高元素先显示,这种autoHeight设置的高度不会设置到最大高度的有效值,等最高元素显示势必被遮蔽,这种情况局限性交大,对于不明确最大高度的情况,不建议使用

方式二:CSS

.swiper-slide {

  height: 1px;/* 随意指定一个height值即可 */    

}

.swiper-slide-active {

  height: auto;

}

 这种要关闭autoHeight,不用考虑逻辑,设置样式就可以,不论哪个元素先显示都可以根据系统高度自适应,综合比较方便快捷

    值得注意的是,这种问题并不是组件进行强刷新就能解决的,只是根据autoHeight的设置swiper已经设置wrapper高度决定的,从而组件强刷新是没用的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WebCsDn_TDCode

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值