swiper/vue库如何实现内容区域纵向缓慢滚动？

Question

背景：
在vue3项目中，希望实现内容容区域纵向缓慢滚动的效果

尝试：
尝试代码如下

<template>
  <div>
    <swiper 
      :loop="true" 
      :slides-per-view="1" 
      :direction="'vertical'" 
      class="mySwiper" 
      :modules="modules" 
      :autoplay="{
        delay: 1000,
        disableOnInteraction: true,
      }"
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <div class="swiper-slide-content">
          {{ slide }}
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import { Navigation, Pagination, A11y, Autoplay } from 'swiper/modules';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const modules = [Navigation, Pagination, A11y, Autoplay];
    return {
      modules,
    };
  },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
    };
  },
};
</script>

<style>
.mySwiper {
  width: 100%;
  height: 300px;
}

.swiper-slide-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 24px;
  background-color: #fff;
}
</style>

问题：
目前来讲主要的问题目前还是幻灯片的效果，期望实现的是不间断地纵向的缓慢循环滚动，鼠标放上去时暂停滚动，鼠标离开时继续滚动。

Answer 1

1.将delay设置为3000毫秒，以实现更缓慢的滚动效果。
2.添加了@mouseenter和@mouseleave事件监听器。
3.在setup函数中添加了pauseAutoplay和resumeAutoplay方法。

<template>
  <div>
    <swiper 
      :loop="true" 
      :slides-per-view="1" 
      :direction="'vertical'" 
      class="mySwiper" 
      :modules="modules" 
      :autoplay="autoplayConfig"
      @mouseenter="pauseAutoplay"
      @mouseleave="resumeAutoplay"
    >
      <swiper-slide v-for="(slide, index) in slides" :key="index">
        <div class="swiper-slide-content">
          {{ slide }}
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import { Navigation, Pagination, A11y, Autoplay } from 'swiper/modules';

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const modules = [Navigation, Pagination, A11y, Autoplay];
    const autoplayConfig = {
      delay: 3000, // 每3000毫秒滚动一次
      disableOnInteraction: false,
    };

    const pauseAutoplay = (swiper) => {
      swiper.autoplay.stop();
    };

    const resumeAutoplay = (swiper) => {
      swiper.autoplay.start();
    };

    return {
      modules,
      autoplayConfig,
      pauseAutoplay,
      resumeAutoplay,
    };
  },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
    };
  },
};
</script>


<style>
.mySwiper {
  width: 100%;
  height: 300px;
}

.swiper-slide-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 24px;
  background-color: #fff;
}

</style>