Swiper6在Vue中使用滚动翻页小记

---

1. 首先进入Swiper官方网站我们打开S6在Vue中的使用手册

https://swiperjs.com/vue#swip...

2. 然后全页搜索mouse相关操作

上图表示Swiper供我们调用的API(module), 值得注意的是标记 ① 处文字:

这表示Swiper6不再同之前一样 在attribute中绑定options, 而是使用module的方式来使用

3. 伪代码演示

<template>
   <swiper
     mousewheel // 这里为定义好的属性( 监听滚轮, 控制swiper-slide), 注意这里需要小写
   >
       <swiper-slide> content </swiper-slide>
   </swiper>
</template>
<script>
import "swiper/swiper.min.css";
import SwiperCore, { Mousewheel } from "swiper"; // 引入默认抛出的核心模块和所用到按需引入的模块
import { Swiper, SwiperSlide } from "swiper/vue"; // swiper components
SwiperCore.use(Mousewheel); // 注册其按需引入的模块. 这样就可以使用了;
export default {
    name: "SwiperTest",
    components: { 
       Swiper,
       SwiperSlide
    }
}
</script>

4. 总结

4.1 文档中寻找合适的模块

4.2 引入并注册module

4.3 属性引用中注意大小写