在 UniApp 中实现一个短视频上下滑动播放的功能，可以使用 swiper 组件来实现滑动效果，并结合 video 组件来播放短视频。以下是一个完整的示例，展示如何在 UniApp 中实现这一功能。

1. 创建 UniApp 项目

如果你还没有创建 UniApp 项目，可以使用 HBuilderX 创建一个新的项目。

2. 编写页面结构

在 pages/index/index.vue 文件中编写页面结构。

<template>
  <view class="container">
    <swiper
      class="swiper"
      vertical
      @change="onSwiperChange"
      :current="currentIndex"
    >
      <swiper-item v-for="(video, index) in videos" :key="index">
        <video
          class="video"
          :id="'video' + index"
          :src="video.url"
          controls
          object-fit="cover"
          @play="onVideoPlay(index)"
          @pause="onVideoPause(index)"
        ></video>
      </swiper-item>
    </swiper>
  </view>
</template>

3. 编写样式

在 pages/index/index.vue 文件中添加样式。

<style>
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

4. 编写 JavaScript 逻辑

在 pages/index/index.vue 文件中添加 JavaScript 逻辑。

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      videos: [
        { url: 'https://example.com/video1.mp4' },
        { url: 'https://example.com/video2.mp4' },
        { url: 'https://example.com/video3.mp4' }
      ],
      playingVideoIndex: -1
    };
  },
  methods: {
    onSwiperChange(e) {
      const newIndex = e.detail.current;
      this.currentIndex = newIndex;

      // Pause the previously playing video
      if (this.playingVideoIndex !== -1 && this.playingVideoIndex !== newIndex) {
        this.pauseVideo(this.playingVideoIndex);
      }

      // Play the new video
      this.playVideo(newIndex);
    },
    playVideo(index) {
      const videoContext = uni.createVideoContext(`video${index}`);
      videoContext.play();
      this.playingVideoIndex = index;
    },
    pauseVideo(index) {
      const videoContext = uni.createVideoContext(`video${index}`);
      videoContext.pause();
    },
    onVideoPlay(index) {
      this.playingVideoIndex = index;
    },
    onVideoPause(index) {
      if (this.playingVideoIndex === index) {
        this.playingVideoIndex = -1;
      }
    }
  }
};
</script>

解释

1. 页面结构 (<template>):

   • 使用 swiper 组件来实现垂直滑动效果。
   • 每个 swiper-item 包含一个 video 组件，用于播放短视频。

2. 样式 (<style>):

   • 设置容器和视频的样式，确保视频能够全屏显示。

3. JavaScript 逻辑 (<script>):

   • 数据 (data):

     • currentIndex: 当前显示的视频索引。
     • videos: 视频列表，包含每个视频的 URL。
     • playingVideoIndex: 当前正在播放的视频索引。

   • 方法 (methods):

     • onSwiperChange: 处理滑动事件，切换视频时暂停之前的视频并播放新的视频。
     • playVideo: 播放指定索引的视频。
     • pauseVideo: 暂停指定索引的视频。
     • onVideoPlay: 处理视频播放事件，更新当前播放的视频索引。
     • onVideoPause: 处理视频暂停事件，更新当前播放的视频索引。

运行项目

确保你已经安装了 HBuilderX 并创建了 UniApp 项目。将上述代码复制到 pages/index/index.vue 文件中，然后运行项目。

npm run dev

或者在 HBuilderX 中直接运行项目。

通过这种方式，你可以在 UniApp 中实现一个短视频上下滑动播放的功能。每个视频在滑动到当前显示位置时自动播放，滑动到其他位置时暂停。