当前位置：首页 > VUE

vue实现视频下滑

2026-03-08 16:51:52VUE

Vue实现视频下滑功能

视频下滑功能通常用于短视频应用或类似场景，允许用户通过手势滑动切换视频。以下是实现这一功能的几种方法：

使用Swiper.js库

Swiper.js是一个流行的触摸滑动库，支持Vue集成。安装Swiper：

npm install swiper@8.0.0 vue-awesome-swiper@4.1.1

在Vue组件中使用：

vue实现视频下滑

<template>
  <swiper
    :direction="'vertical'"
    :slidesPerView="1"
    :mousewheel="true"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="video in videos" :key="video.id">
      <video :src="video.url" controls autoplay></video>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      videos: [
        { id: 1, url: 'video1.mp4' },
        { id: 2, url: 'video2.mp4' }
      ]
    }
  },
  methods: {
    onSlideChange(swiper) {
      const currentVideo = this.videos[swiper.activeIndex]
      console.log('当前播放:', currentVideo)
    }
  }
}
</script>

自定义手势实现

对于更轻量级的解决方案，可以手动实现触摸事件处理：

vue实现视频下滑

<template>
  <div 
    class="video-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <video 
      v-for="(video, index) in videos" 
      :key="video.id"
      :src="video.url"
      :class="{ 'active': currentIndex === index }"
      controls
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      startY: 0,
      videos: [
        { id: 1, url: 'video1.mp4' },
        { id: 2, url: 'video2.mp4' }
      ]
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startY = e.touches[0].clientY
    },
    handleTouchMove(e) {
      e.preventDefault()
    },
    handleTouchEnd(e) {
      const endY = e.changedTouches[0].clientY
      const diff = this.startY - endY

      if (Math.abs(diff) > 50) {
        if (diff > 0 && this.currentIndex < this.videos.length - 1) {
          this.currentIndex++
        } else if (diff < 0 && this.currentIndex > 0) {
          this.currentIndex--
        }
      }
    }
  }
}
</script>

<style>
.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.video-container video {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}
.video-container video:not(.active) {
  transform: translateY(100%);
}
</style>

使用CSS Scroll Snap

纯CSS解决方案适合简单场景：

<template>
  <div class="scroll-container">
    <div 
      v-for="video in videos" 
      :key="video.id"
      class="video-item"
    >
      <video :src="video.url" controls></video>
    </div>
  </div>
</template>

<style>
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.video-item {
  height: 100vh;
  scroll-snap-align: start;
}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

性能优化建议