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