vue实现视频滑动切换

实现视频滑动切换的思路

在Vue中实现视频滑动切换功能，可以通过监听触摸事件或鼠标事件，结合CSS过渡效果和Vue的数据绑定来实现。以下是具体的实现方法：

监听触摸事件

通过监听touchstart、touchmove和touchend事件，可以获取用户滑动的距离和方向。在Vue中，可以在组件的mounted钩子中添加事件监听器。

mounted() {
  const videoContainer = this.$refs.videoContainer;
  videoContainer.addEventListener('touchstart', this.handleTouchStart);
  videoContainer.addEventListener('touchmove', this.handleTouchMove);
  videoContainer.addEventListener('touchend', this.handleTouchEnd);
},
methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
  },
  handleTouchMove(e) {
    this.moveX = e.touches[0].clientX;
  },
  handleTouchEnd() {
    const diff = this.moveX - this.startX;
    if (Math.abs(diff) > 50) {
      if (diff > 0) {
        this.prevVideo();
      } else {
        this.nextVideo();
      }
    }
  },
  prevVideo() {
    if (this.currentIndex > 0) {
      this.currentIndex--;
    }
  },
  nextVideo() {
    if (this.currentIndex < this.videos.length - 1) {
      this.currentIndex++;
    }
  }
}

使用CSS过渡效果

通过Vue的transition组件和CSS过渡效果，可以实现平滑的视频切换动画。定义一个过渡类名，并在CSS中设置过渡效果。

<transition name="slide">
  <video :key="currentVideo.id" :src="currentVideo.src" controls></video>
</transition>

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

数据绑定与视频切换

在Vue的data中定义视频列表和当前视频索引，通过计算属性获取当前视频。

data() {
  return {
    videos: [
      { id: 1, src: 'video1.mp4' },
      { id: 2, src: 'video2.mp4' },
      { id: 3, src: 'video3.mp4' }
    ],
    currentIndex: 0,
    startX: 0,
    moveX: 0
  };
},
computed: {
  currentVideo() {
    return this.videos[this.currentIndex];
  }
}

鼠标事件支持

为了支持桌面端的鼠标滑动，可以添加mousedown、mousemove和mouseup事件监听器。

mounted() {
  const videoContainer = this.$refs.videoContainer;
  videoContainer.addEventListener('mousedown', this.handleMouseDown);
  videoContainer.addEventListener('mousemove', this.handleMouseMove);
  videoContainer.addEventListener('mouseup', this.handleMouseUp);
},
methods: {
  handleMouseDown(e) {
    this.startX = e.clientX;
  },
  handleMouseMove(e) {
    if (this.startX !== null) {
      this.moveX = e.clientX;
    }
  },
  handleMouseUp() {
    const diff = this.moveX - this.startX;
    if (Math.abs(diff) > 50) {
      if (diff > 0) {
        this.prevVideo();
      } else {
        this.nextVideo();
      }
    }
    this.startX = null;
  }
}

完整示例代码

以下是一个完整的Vue组件示例，实现了视频滑动切换功能：

<template>
  <div class="video-container" ref="videoContainer">
    <transition name="slide">
      <video :key="currentVideo.id" :src="currentVideo.src" controls></video>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { id: 1, src: 'video1.mp4' },
        { id: 2, src: 'video2.mp4' },
        { id: 3, src: 'video3.mp4' }
      ],
      currentIndex: 0,
      startX: 0,
      moveX: 0
    };
  },
  computed: {
    currentVideo() {
      return this.videos[this.currentIndex];
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      this.moveX = e.touches[0].clientX;
    },
    handleTouchEnd() {
      const diff = this.moveX - this.startX;
      if (Math.abs(diff) > 50) {
        if (diff > 0) {
          this.prevVideo();
        } else {
          this.nextVideo();
        }
      }
    },
    handleMouseDown(e) {
      this.startX = e.clientX;
    },
    handleMouseMove(e) {
      if (this.startX !== null) {
        this.moveX = e.clientX;
      }
    },
    handleMouseUp() {
      const diff = this.moveX - this.startX;
      if (Math.abs(diff) > 50) {
        if (diff > 0) {
          this.prevVideo();
        } else {
          this.nextVideo();
        }
      }
      this.startX = null;
    },
    prevVideo() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    nextVideo() {
      if (this.currentIndex < this.videos.length - 1) {
        this.currentIndex++;
      }
    }
  },
  mounted() {
    const videoContainer = this.$refs.videoContainer;
    videoContainer.addEventListener('touchstart', this.handleTouchStart);
    videoContainer.addEventListener('touchmove', this.handleTouchMove);
    videoContainer.addEventListener('touchend', this.handleTouchEnd);
    videoContainer.addEventListener('mousedown', this.handleMouseDown);
    videoContainer.addEventListener('mousemove', this.handleMouseMove);
    videoContainer.addEventListener('mouseup', this.handleMouseUp);
  },
  beforeDestroy() {
    const videoContainer = this.$refs.videoContainer;
    videoContainer.removeEventListener('touchstart', this.handleTouchStart);
    videoContainer.removeEventListener('touchmove', this.handleTouchMove);
    videoContainer.removeEventListener('touchend', this.handleTouchEnd);
    videoContainer.removeEventListener('mousedown', this.handleMouseDown);
    videoContainer.removeEventListener('mousemove', this.handleMouseMove);
    videoContainer.removeEventListener('mouseup', this.handleMouseUp);
  }
};
</script>

<style>
.video-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

通过以上方法，可以在Vue中实现一个支持触摸和鼠标滑动的视频切换功能。