swiper6版本下滚轮失效&分页失效等的问题

swiper6中一些配置会失效

原因是控件需要单独引入

 

如我 这次用的swiper相关版本是： 

npm i swiper@6.8.4 vue-awesome-swiper@4.1.1

 

在滚轮切换、分页、左右切换和动效配置中，都需要单独引入控件

 

?

1 2 3 4

import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import Swiper2, { Pagination, EffectCoverflow, Navigation } from "swiper"; import "swiper/swiper-bundle.css"; Swiper2.use([Pagination, Navigation, EffectCoverflow]);

　　

?

1 2 3 4

import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import Swiper2, { Mousewheel } from "swiper"; import "swiper/swiper-bundle.css"; Swiper2.use([Mousewheel]);

　　

其余照旧即可

附上鼠标滚轮切换的配置：

?

1 2 3 4

mousewheel: true, mousewheelControl: true, observer: true, observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新

　　

 以及vue-awesome-swiper版本不同时，写法也会不同

之前用3.1.1时，跳页的方法是这么写的：

?

1 2 3 4 5 6 7 8 9

//手动跳到指定页 change(index) {   this.$refs.moduleSwiper.swiper.slideTo(index);   this.active = index; }, slideChange() {   const index = this.$refs.moduleSwiper.swiper.activeIndex;   this.active = index; },

　　

升级到4之后，swiper需要加$才能获取到：

?

1 2 3 4 5 6 7 8 9

//手动跳到指定页 change(index) {   this.$refs.moduleSwiper.$swiper.slideTo(index);   this.active = index; }, slideChange() {   const index = this.$refs.moduleSwiper.$swiper.activeIndex;   this.active = index; },

　　

包括swiper.css的样式引入路径也不同

之前swiper5是在css文件夹下的，swiper6则直接在插件根目录下：

?

1	import "swiper/swiper.less";