导航：首页 > 开发技术 >

vue2使用swiper4踩坑的示例分析

发表于：2024-11-28 作者：千家信息网编辑

千家信息网最后更新 2024年11月28日，vue2使用swiper4踩坑的示例分析，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。前言一开始打算采用最新的swiper7，后来好

千家信息网最后更新 2024年11月28日vue2使用swiper4踩坑的示例分析

vue2使用swiper4踩坑的示例分析，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

前言

一开始打算采用最新的swiper7，后来好像是vue2兼容性问题，各种报错，所以从7退回到6，然后退回到5,5则是遇到鼠标滚轮事件的bug，于是再度回滚，到4终于画风正常了。

首先是引入

npm i swiper

↑这句话不是复制的，是因为出错太多，反复引用导致了可以直接手打的地步。

值得一提的是，下载会默认下载7，直接用艾特符号标定不如直接改版本重新下，此时需要在package.json里面调成版本4后重新下载

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

其他软件不清楚是否是必须。

踩坑2：引入位置

如果焦急的你看到这篇博客，而且不介意回滚到4的话，可以下载版本4，随后在需要轮播图的地方引入这三句话

import 'swiper/dist/js/swiper'import 'swiper/dist/css/swiper.css'import Swiper from "swiper"

这样就可以去官网拷代码了。new Swiper写在mouted里面。

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

我的代码：

this.swiper = new Swiper(".swiper-container-son1", {})

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

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

官网3的示例：

nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',

官网的版本7的示例:

navigation: {     nextEl: ".swiper-button-next",     prevEl: ".swiper-button-prev", },

这里采用的是官网版本7才能生效

绝大部分都是官网 7生效，但是小部分却是要版本4才能生效。

还有一个极致坑爹的属性，滚轮

省略*你妈买菜必超级加倍，跳广场舞永无C位*等脏话。

官网的官方api、swiper3以及swiper7的示例都是同一句

mousewheelControl : true,

但是，也许是swiper4特供，也许是各种不可名状的bug，真正在swiper4可用的代码是

mousewheel: true,

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

如果你的轮播数据来源是请求数据，那么需要补上一句

observer: true,//修改swiper自己或子元素时，自动初始化swiper

或者干脆做的更绝，直接在list监听里面写

watch: {    imgList() {        setTimeout(() => {            // eslint-disable-next-line no-unused-vars            this.swiper = new Swiper(".swiper-container-son1", {                speed: 1000,                autoplay: {                    delay: 4000,                    stopOnLastSlide: false,                    disableOnInteraction: true,                }            })        }, 0)    }},

这样可以保证在请求完成之后再执行插件。