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

swiper6中一些配置会失效

原因是控件需要单独引入

 

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

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

 

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

 

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";