swiper模块加载时宽度显示错误的问题

吃你家火锅了吗

于 2019-05-09 16:14:01 发布

阅读量4.2k

点赞数 5

本文链接：https://blog.youkuaiyun.com/weixin_43991262/article/details/90039936

版权

本文介绍了在使用Swiper轮播组件时遇到的宽度显示错误问题及其两种常见原因：浏览器尺寸变化和Swiper隐藏后重新加载。提供了一种解决方法，通过在JS中添加observer和observeParents属性来自动初始化Swiper，确保宽度正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

已经第二次碰到这个问题了，第一次以为是意外，自己琢磨半天解决了，但是……我忘记当初怎么解决的了，emmmmmm

七秒钟的记忆

试了一下，到目前我发现的会出现宽度显示错误问题的原因有两种：
一是浏览器size发生了变化，二是swiper隐藏后重新加载显示的时候，都可能会出现内部模块宽度错误的问题。

所以记一下这次的解决办法吧，以往万一。

var mySwiper = myApp.swiper('.my-wrapper',{
     freeMode : true,
     slidesPerView : 'auto',
     observer: true,//修改swiper自己或子元素时，自动初始化swiper
     observeParents: true//修改swiper的父元素时，自动初始化swiper
 });

就写js效果的时候把后两行加上就行了。
具体解释在官网：
observer
observeParents

完了。