swiper6中一些配置会失效
原因是控件需要单独引入
如我 这次用的swiper相关版本是:
npm i [email protected] [email protected] 在滚轮切换、分页、左右切换和动效配置中,都需要单独引入控件import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import Swiper2, { Pagination, EffectCoverflow, Navigation } from "swiper"; import "swiper/swiper-bundle.css"; Swiper2.use([Pagination, Navigation, EffectCoverflow]);
import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import Swiper2, { Mousewheel } from "swiper"; import "swiper/swiper-bundle.css"; Swiper2.use([Mousewheel]);
其余照旧即可
附上鼠标滚轮切换的配置:
mousewheel: true, mousewheelControl: true, observer: true, observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新
以及vue-awesome-swiper版本不同时,写法也会不同
之前用3.1.1时,跳页的方法是这么写的:
//手动跳到指定页 change(index) { this.$refs.moduleSwiper.swiper.slideTo(index); this.active = index; }, slideChange() { const index = this.$refs.moduleSwiper.swiper.activeIndex; this.active = index; },
升级到4之后,swiper需要加$才能获取到:
//手动跳到指定页 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则直接在插件根目录下:
import "swiper/swiper.less";
标签:index,滚轮,swiper6,Swiper,import,失效,Swiper2,swiper From: https://www.cnblogs.com/nangras/p/18412129