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高度决定的,从而组件强刷新是没用的