vue2使用swiper4踩坑的示例分析,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
一开始打算采用最新的swiper7,后来好像是vue2兼容性问题,各种报错,所以从7退回到6,然后退回到5,5则是遇到鼠标滚轮事件的bug,于是再度回滚,到4终于画风正常了。
首先是引入
npm i swiper
↑这句话不是复制的,是因为出错太多,反复引用导致了可以直接手打的地步。
值得一提的是,下载会默认下载7,直接用艾特符号标定不如直接改版本重新下,此时需要在package.json里面调成版本4后重新下载
其他软件不清楚是否是必须。
如果焦急的你看到这篇博客,而且不介意回滚到4的话,可以下载版本4,随后在需要轮播图的地方引入这三句话
import 'swiper/dist/js/swiper' import 'swiper/dist/css/swiper.css' import Swiper from "swiper"
这样就可以去官网拷代码了。new Swiper写在mouted里面。
我的代码:
this.swiper = new Swiper(".swiper-container-son1", {})
最简单的一个,前进后退的属性
官网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,
如果你的轮播数据来源是请求数据,那么需要补上一句
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) } },
这样可以保证在请求完成之后再执行插件。
可能是scss文件未安装。vue-awesome-swiper 的scss文件要单独安装。并不随包一块导入。 cnpm install --save swiper swiper/swiper-bundle.css swiper/swiper.scss
关于vue2使用swiper4踩坑的示例分析问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。