温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue2使用swiper4踩坑的示例分析

发布时间:2022-01-10 10:48:44 来源:亿速云 阅读:533 作者:柒染 栏目:开发技术

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)
    }
},

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

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

  • 可能是scss文件未安装。vue-awesome-swiper 的scss文件要单独安装。并不随包一块导入。 cnpm install --save swiper swiper/swiper-bundle.css swiper/swiper.scss

关于vue2使用swiper4踩坑的示例分析问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI