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 componentsSwiperCore.use(Mousewheel); // 注册其按需引入的模块. 这样就能够应用了;export default { name: "SwiperTest", components: { Swiper, SwiperSlide }}</script>4. 总结
4.1 文档中寻找适合的模块
4.2 引入并注册module
4.3 属性援用中留神大小写