博客

安装swiper版本

npm install swiper@7.4.1

import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import { Autoplay } from "swiper";

let modules = [Autoplay];

<swiper
      @swiper="onSwiper"
      :slidesPerView="3"
      :autoplay="{ delay: 2500, disableOnInteraction: true }"
      :loop="true"
      :direction="'vertical'"
      :space-between="10"
      :modules="modules"
      @mouseenter="enter"
      @mouseleave="leave"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
    </swiper>

因为我要实现的效果是竖行滚动，并且一页展示3条数据 所以 slidesPerView设置为3，direction设置为”‘vertical'” ，一定记住必须是双引号里面再包单引号，不然没效果。

自动播放的话，就要引入模块

import { Autoplay } from "swiper";

let modules = [Autoplay];，

咱也不知道为啥这样写，反正swiper7官方文档是喊这样写的。

然后如果想移入暂停就要先获取到swiper对象，但是获取到的是响应式对象，所以需要先转换为非响应式

//定义swiperNew,目的获取非响应式swiper
let swiperNew: any;

//鼠标移入
const enter = () => {
  swiperNew.autoplay.stop();
};
//鼠标移出
const leave=()=>{
  swiperNew.autoplay.start();
}
const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper);  //拿到swiper对象再转换为非响应式
};

打印一下获取的对象

完事！！！！