实现抖音视频滑动功能vue3+swiper

首先，你需要安装和引入Swiper库。可以使用npm或者yarn进行安装。

pnpm install swiper

然后在Vue组件中引入Swiper库和样式。

// 导入Swiper组件和SwiperSlide组件，用于创建轮播图
import {
    Swiper, SwiperSlide } from 'swiper/vue';
// 导入Swiper的CSS样式，确保轮播图的正确显示
import 'swiper/css';

接下来，我们可以在Vue组件中定义Swiper的滑动功能。

 <swiper class="swiper-box" direction="vertical" :slides-per-view="1" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide class="swiper-item" v-for="(video, index) in videoList" :key="index">
        <video ref="videoRefs" width="100%" autoplay muted controls loop preload="metadata" :poster="`https://app.kpgansu.cn${video.pictureUrl}`">
          <source :src="`https://app.kpgansu.cn${video.videoUrl}`">
          您的浏览器不支持视频标签。