Swiper6 uses scrolling page-turning notes in Vue

1. First enter the official website of Swiper and open the manual of S6 in Vue

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

2. Then search the whole page for mouse related operations

The above figure shows the API(module) for Swiper to call, with the tags of note1.Text:

This means that Swiper6 is no longer bound with options in attributes as before, but is used as a module

3. Pseudocode demonstration

<template> <swiper mousewheel // This is the property defined (listen to the wheel, control the 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"; import {Swiper, SwiperSlide} from" Swiper /vue"; // swiper components SwiperCore.use(Mousewheel); // Register the modules it introduces on demand. So it's ready to use; export default { name: "SwiperTest", components: { Swiper, SwiperSlide } } </script>

4. To summarize

4.1Find the appropriate module in the document

4.2Introduce and register the module

4.3Pay attention to case in property references