uni-app swiper内嵌video滑动不灵敏

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app swiper内嵌video滑动不灵敏

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 10
HBuilderX 正式版
HBuilderX版本号 4.27
手机系统 Android
手机版本号 Android 15
手机厂商 华为
手机机型 Nove7 pro
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

。。。。。

预期结果：

。。。。。。

实际结果：

。。。。。

bug描述：

滑动非常非常不灵敏，这个录屏就是你们官方的hellow uniapp。这个问题我看到论坛人家20年就提交了，你们还是这样，虽然有这个功能，但能用吗？


Harmonyos Next教程
5 回复

没人回答吗？还是说这个就不能这样实现？不能实现你们弄一个demo放哪里是凑数的吗？？这个体验都能给用户用？


你好， video文档， video 不能放到swiper和scroll-view中

我当然知道全屏的时候不能再swiper中，但是没有全屏的时候是可以的呀！我说的是你们hellow uniapp中 实例->模板 中的上下滑动切换视频，为什么那么不顺畅？？？

你可以去看看，他能算一个成品嘛？

在 uni-app 中使用 swiper 组件内嵌 video 组件时，确实可能会遇到滑动不灵敏的问题。这通常是由于 video 组件自身的事件处理机制与 swiper 的滑动事件冲突导致的。为了解决这个问题，我们可以尝试一些技术手段，比如通过监听 video 的事件来控制 swiper 的滑动行为，或者调整 swiper 和 video 的样式及属性。

以下是一个可能的解决方案，通过监听 video 的 pause 和 play 事件，结合 swiper 的 current 属性来手动控制滑动行为：

<template>
  <view>
    <swiper
      :current="swiperCurrent"
      @change="onSwiperChange"
      class="swiper-container"
    >
      <swiper-item v-for="(item, index) in videoList" :key="index">
        <video
          class="video-item"
          :src="item.src"
          controls
          @pause="onVideoPause(index)"
          @play="onVideoPlay(index)"
        ></video>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperCurrent: 0,
      videoList: [
        { src: 'video1.mp4' },
        { src: 'video2.mp4' },
        // 更多视频源...
      ],
      videoPlayingIndex: null, // 当前播放视频的索引
    };
  },
  methods: {
    onSwiperChange(event) {
      this.swiperCurrent = event.detail.current;
      // 如果当前有视频在播放，暂停它
      if (this.videoPlayingIndex !== null) {
        const videoElement = this.$refs[`video_${this.videoPlayingIndex}`][0];
        if (videoElement) {
          videoElement.pause();
        }
        this.videoPlayingIndex = null;
      }
    },
    onVideoPlay(index) {
      this.videoPlayingIndex = index;
    },
    onVideoPause(index) {
      // 这里可以根据需要处理视频暂停事件
    },
  },
};
</script>

<style>
.swiper-container {
  width: 100%;
  height: 300px; /* 根据需要调整高度 */
}
.video-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在这个例子中，我们通过监听 video 的 pause 和 play 事件来记录当前播放视频的索引。当 swiper 的 current 改变时，如果之前有视频在播放，则暂停该视频。这样可以避免在滑动 swiper 时由于视频播放导致的滑动不灵敏问题。注意，这里使用了 ref 来获取视频元素，但在 uni-app 中直接通过 ref 访问 DOM 元素可能受限，因此上述代码中的 this.$refs[video_${this.videoPlayingIndex}][0] 可能需要根据实际情况调整，或者通过其他方式获取视频元素。

回到顶部