vue-swiper,swiper6 vue3

　　最近，vue的一个手工训练项目需要在其中实现一个旋转木马地图。我想到了用第三方插件。百度了一圈，发现大部分都是swiper插件。本文主要介绍vue2使用Swiper R4踩坑的相关信息。有需要的朋友可以参考一下。

目录

　　前言踩坑1:为了保证稳定性，最好立即下载当前版本，然后每次在package.json中更新该版本时重启webstorm，步骤2:导入位置步骤3:使用空间。如果是轮播地图，需要注意命名，或者简单的用id就可以得到Tread 4:版本变化导致无法使用Tread 5:动态渲染导致的各种bug。附：Vue推出swiper错误解决方案的参考摘要

前言

　　一开始打算采用最新的swiper7，后来好像是vue2兼容问题，各种错误都报了，于是从7回6，再回5，这是鼠标滚轮事件的bug，所以又回了一次，最后画风在4正常。

　　首先是介绍

　　npm i swiper

　　这句话不抄了，因为错误太多。重复引用导致可以直接手写输入。

　　值得一提的是，下载会默认下载7。直接用艾特符号校准不如直接换版本重新下载。此时需要在package.json中调整到版本4，然后重新下载。

踩坑1：为了保证稳定，每次在package.json更该版本，最好立即下载当前版本，随后重启webstorm。

　　其他软件不清楚是否有必要。

踩坑2：引入位置

　　如果你急着看这个博客，不介意回滚到4，可以下载4版，然后在需要轮播的地方介绍这三句话。

　　导入 swiper/dist/js/swiper

　　导入 swiper/dist/css/swiper.css

　　从“swiper”导入Swiper

　　所以可以去官网抄代码。新Swiper是用mouted写的。

踩坑3：使用空间，如果是轮播图内套轮播图，则需要注意命名，或者干脆采用id获取

　　我的代码：

　　this.swiper=new Swiper(。swiper-container-son1 ，{})

踩坑4：版本更迭导致无法通用

　　最简单的一个，前进后退的属性。

　　官方网站示例3:

　　下一步按钮：“”。swiper-button-next ，

　　上一页按钮：。swiper-button-prev ，

　　官网第7版示例：

　　导航：{

　　nextEl:。swiper-button-next ，

　　普雷维尔：。swiper-button-prev ，

　　},

　　此处采用官网7版生效。

　　大部分是官网7生效，少数需要4版。

　　还有一个极其可怜的属性，滚筒。

　　省略*你妈会买两倍的菜，广场舞绝对不会有C位*等脏话。

　　官网的官方api，swiper3和swiper7的例子都在同一句话里。

　　mousewheelControl:对，

　　不过，也许是SwiperR4的特价，也可能是各种说不清的bug。SwiperR4中真正可用的代码是

　　鼠标滚轮：没错，

踩坑5：动态渲染导致的各种bug。

　　如果您的carousel数据源是请求数据，您需要添加一句话。

　　Observer: true，//swiper在修改自身或其子元素时自动初始化。

　　或者干脆做得更好，直接写在列表监视器里。

　　观察：{

　　imgList() {

　　setTimeout(()={

　　//eslint-disable-next-line no-unused-vars

　　this.swiper=new Swiper(。swiper-container-son1 ，{

　　速度：1000，

　　自动播放：{

　　延时：4000，

　　stopOnLastSlide: false，

　　disableOnInteraction: true，

　　}

　　})

　　}, 0)

　　}

　　},

　　这确保了在请求完成之前，插件不会被执行。

附：Vue 引入swiper出错解决方案参考

　　可能没有安装scss文件。vue-awesome-swiper的Scss文件要单独安装。它不是随包一起导入的。cnpm安装-保存swiper swiper/swiper-bundle . CSS swiper/swiper . scss

总结

　　关于vue2用swiper4踩坑的这篇文章到此为止。更多关于vue2使用swiper4踩坑的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。