uni-app中视频上覆盖cover-view时input不显示问题

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

uni-app中视频上覆盖cover-view时input不显示问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：4.29

手机系统：Android

手机系统版本号：Android 15

手机厂商：小米

手机机型：Redmi Note 9 Pro

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<video src="">  
    <cover-view class="mbb4">  
        <cover-view style="line-height: 32px;height: 32px;">  
            兑换数量：  
        </cover-view>  
        <input type="number" class="inp" placeholder="请输入" v-model="realName" />  
    </cover-view>  
</video>  


操作步骤：

真机运行可以看的


预期结果：

input 输入框可以显示出来


实际结果：

input 输入框没有显示出来


bug描述：

在视频是使用 cover-view input input不显示


Harmonyos Next教程
3 回复

解决了吗


解决了用 nvue去写

在uni-app中，cover-view 组件被设计用于覆盖在原生组件（如视频、地图等）之上。然而，在某些情况下，当 cover-view 覆盖在视频上时，可能会遇到其他组件（如 input）不显示的问题。这通常是由于层级管理或渲染机制导致的。

为了解决这个问题，我们可以通过调整样式和层级关系来尝试修复 input 不显示的问题。以下是一个示例代码，展示如何在 cover-view 上正确使用 input，并确保其可见性。

首先，确保你的页面结构大致如下：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="path/to/your/video.mp4"
      controls
      style="width: 100%; height: 300px;"
    ></video>
    <cover-view class="cover-view">
      <cover-view class="input-container">
        <input type="text" placeholder="Type something..." />
      </cover-view>
    </cover-view>
  </view>
</template>

接下来，是样式部分。这里的关键是确保 cover-view 和 input 的样式正确设置，以避免被视频或其他元素遮挡：

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 确保视频在底层 */
}

.cover-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; /* 确保 cover-view 在视频之上 */
  background-color: rgba(0, 0, 0, 0.5); /* 可选：增加半透明背景以便更好地看到输入框 */
}

.input-container {
  position: relative;
  z-index: 20; /* 确保 input 容器在最上层 */
}

input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8); /* 可选：增加背景色以提高可见性 */
}
</style>

在这个示例中，我们通过设置 z-index 来控制不同元素的层级关系。video 元素的 z-index 被设置为 1，而 cover-view 的 z-index 被设置为更高的值（10），以确保它覆盖在视频之上。同时，input 容器被赋予了一个更高的 z-index（20），以确保它在所有元素之上。

请注意，由于不同设备和浏览器的渲染差异，上述解决方案可能需要根据实际情况进行调整。在某些极端情况下，如果问题依然存在，可能需要考虑使用其他方法或组件来实现相同的功能。

回到顶部