uni-app video组件退出全屏时页面滚动条自动归零

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

uni-app video组件退出全屏时页面滚动条自动归零

开发环境 版本号 项目创建方式
Mac 13.6.7 HBuilderX

操作步骤：

页面上多个video，页面往下滚一点，随便播放哪个video，进入全屏，再退出全屏，页面会自动滚动到最上面

预期结果：

页面保持原来位置

实际结果：

页面会自动滚动到最上面

bug描述：

页面上多个video，页面往下滚一点，随便播放哪个video，进入全屏，再退出全屏，页面会自动滚动到最上面


Harmonyos Next教程
2 回复

如果真的有这个问题，建议先绕过。监听页面滚动，保存滚动距离，然后再视频video监听全屏事件，监听到非全屏了就设置一下uni.pageScrollTo滚过去，等官方解决了就可以去掉了


在uni-app中，使用video组件时，全屏播放视频并在退出全屏后页面滚动条自动归零的问题确实会影响用户体验。我们可以通过监听全屏变化事件来控制页面的滚动位置。以下是一个解决方案的代码示例，展示了如何在退出全屏时恢复页面的滚动位置。

首先，确保你的页面中有video组件，并设置必要的属性，比如id，以便后续操作：

<template>
  <view>
    <scroll-view scroll-y="true" ref="scrollView">
      <!-- 其他内容 -->
      <video
        id="myVideo"
        src="your-video-url.mp4"
        controls
        @fullscreenchange="handleFullscreenChange"
      ></video>
      <!-- 更多内容以确保出现滚动条 -->
    </scroll-view>
  </view>
</template>

在脚本部分，我们需要监听全屏变化事件，并在退出全屏时恢复滚动位置。由于uni-app没有直接提供fullscreenchange事件的绑定方式在video组件上（这通常是浏览器原生事件），我们可以通过监听页面的全屏变化事件来间接处理：

<script>
export default {
  data() {
    return {
      scrollY: 0 // 用于存储滚动位置
    };
  },
  mounted() {
    // 监听页面全屏变化事件
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    // 移除事件监听器
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
  },
  methods: {
    handleFullscreenChange() {
      if (!document.fullscreenElement) {
        // 退出全屏时
        const scrollView = this.$refs.scrollView;
        scrollView.scrollTop = this.scrollY;
      } else {
        // 进入全屏前保存滚动位置
        const scrollView = this.$refs.scrollView;
        this.scrollY = scrollView.scrollTop;
      }
    }
  }
};
</script>

在这个例子中，我们使用了fullscreenchange及其浏览器前缀事件来监听全屏状态的变化。在进入全屏前，我们保存当前的滚动位置；在退出全屏时，我们恢复这个滚动位置。注意，由于scroll-view组件的滚动位置是通过其scrollTop属性控制的，我们需要通过ref引用它来获取和设置滚动位置。

这种方法可以有效解决uni-app中video组件退出全屏时页面滚动条自动归零的问题。

回到顶部