关于swiper.js: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 属性援用中留神大小写