文章摘要
这篇文章主要讲述了在使用Vue的Swiper组件时遇到的常见问题及解决方案。作者在使用Swiper过程中遇到了以下问题：
1. **报错信息**：在运行代码时，Swiper组件报错信息指出无法执行`getComputedStyle`，参数1不是Element类型。经过排查，发现问题出在外层容器的`ref`属性引用的类名与官方文档中的示例不符。
2. **类名修改的限制**：尽管可以修改外层容器的`class`名，但Swiper内部依赖的是初始定义的外层容器。如果修改外层类名，Swiper组件可能会无法正常识别，导致报错。
3. **swiper-wrapper和swiper-slide的使用**：作者尝试修改内层`swiper-slide`的类名，但因为未能与外层`swiper-wrapper`的类名保持一致，仍然导致报错。最终发现，类名的定义和维护需要高度一致，否则会影响Swiper的正常运行。
4. **解决方法**：在官方文档的指导下，作者最终修改了内层`swiper-slide`的类名，确保与外层`swiper-wrapper`的类名一致，成功解决了报错问题。文章还强调了正确初始化Swiper组件外层容器的重要性，建议用户严格按照官方文档的示例进行开发。
总结来说，文章通过实际操作经验，详细讲述了在使用Swiper组件时容易遇到的踩坑问题，以及如何避免这些问题。
目录我的Swiper定义：报错信息：保留默认名class：swiper-container查看GitHub
Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’
<div class=”nyswiper-container” ref=”my_swiper”>
<div class=”mySwiperWrapper”>
<slot name=”content”> </slot>
</div>
</div>
<div class=”mySwiperWrapper”>
<slot name=”content”> </slot>
</div>
</div>
看了官方文档之后发现：
修改之后：
<div class=”swiper-container” ref=”my_swiper”>
<div class=”mySwiperWrapper”>
<slot name=”content”> </slot>
</div>
</div>
<div class=”mySwiperWrapper”>
<slot name=”content”> </slot>
</div>
</div>
继续报错，还是什么那个错。
他说需要个wrapper，但是我已经定义了wrapper了，只不过名字不是swiper-wraper,
后来还是把类名改回来，我本以为只要定义了外面的container，里面的类名可以随便写，只要符合层级关系就好。
最后还是改回来原来的类名：
<div class=”swiper-container” ref=”my_swiper”>
<div class=”swiper-wrapper”>
<slot name=”content”> </slot>
</div>
</div>
<div class=”swiper-wrapper”>
<slot name=”content”> </slot>
</div>
</div>
最后不会报错了：
其实我已经使用很多次这个玩意了，之前是这样定义的：可以正常运行。
<div ref=”school_swiper” class=”swiper-container_home”>
<div class=”swiper-wrapper”>
<div
class=”swiper-slide swiper_slide_home”
v-for=”(item, index) in imgList”
:key=”index”
>
<div></div>
</div>
</div>
<div class=”swiper-pagination” style=”color:#ffffff”></div>
</div>
<div class=”swiper-wrapper”>
<div
class=”swiper-slide swiper_slide_home”
v-for=”(item, index) in imgList”
:key=”index”
>
<div></div>
</div>
</div>
<div class=”swiper-pagination” style=”color:#ffffff”></div>
</div>
所以我觉得，外面的类名可以修改，但是wrapper类名不可以修改，因为你即使改了外面的类名，由于你通过refs拿到外面这个container了，然后初始化了Swiper，Swiper内部还是觉得你这样的处理是对的。外面这个container我觉得主要是用来初始化用的，类名无需保留，这个和我看中文的swiper文档写的不一样，它说要保留，可能目的就是为了让用户遵守它的规定，防止报错吧。：
new Swiper(this.$refs.school_swiper, {
loop: true, // 循环模式选项
width: window.innerWidth * 1,
//分页器
pagination: {
el: “.swiper-pagination”,
},
autoplay: {
delay: 2000,
disableOnInteraction: false, //用户触摸后静止关闭
},
}));
},
loop: true, // 循环模式选项
width: window.innerWidth * 1,
//分页器
pagination: {
el: “.swiper-pagination”,
},
autoplay: {
delay: 2000,
disableOnInteraction: false, //用户触摸后静止关闭
},
}));
},
最后修订swiper-slide类名也不能舍弃。。也要加上才能滑动，使用插槽时，直接在外面的组件中定义swiper-slide即可
以上就是vue使用Swiper踩坑：的详细内容，更多关于vue使用Swiper踩坑：的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:vue中使用swiper,左右箭头点击没有效果问题及解决vue中使用swiper5方式vue调用swiper插件步骤教程(最易理解且详细)vue使用swiper插件实现垂直轮播图vue项目中swiper轮播active图片实现居中并放大
© 版权声明
文章版权归作者所有，未经允许请勿转载。
