覆盖视图组件

cover-view 组件是 Uniapp 提供的一个特殊组件，专门用于在原生组件（如 video、map、canvas 等）上显示覆盖内容。由于这些原生组件的渲染层级高于普通组件，开发者无法使用常规的 HTML 元素覆盖它们，这时需要使用 cover-view 组件来确保其他元素如文本、按钮等能够显示在原生组件之上。

1. 什么是 cover-view 组件？

cover-view 组件用于在底层原生组件上覆盖内容，可以添加文字、按钮、图片等常见 UI 元素。它提供了简洁的层级控制和良好的性能，使得在视频播放器、地图等场景中可以灵活地控制用户交互。

使用场景

• 视频播放器的交互：在视频上覆盖播放按钮、暂停按钮等。
• 地图控件：在地图上显示自定义标记、信息面板等。
• 原生组件覆盖：任何需要在 map、video 或 canvas 等原生组件上覆盖自定义内容的场景。

2. cover-view 组件的常用属性

cover-view 提供了简单的属性来控制其显示和层级，以下是主要属性的说明：

属性名	类型	说明	平台差异说明
scroll-top	Number/String	设置顶部滚动偏移量，仅在 cover-view 成为滚动元素时生效	支付宝小程序不支持

2.1 层级覆盖和点击交互

• 说明：cover-view 组件允许在其内部嵌套其他 cover-view 元素，从而实现覆盖和点击交互效果。可以使用 @click 来绑定点击事件。
• 使用场景：常见于视频播放器上方添加播放按钮或在地图控件上显示额外信息。

<template>
  <view class="container">
    <!-- 原生 video 组件 -->
    <video 
      id="video" 
      src="https://www.w3schools.com/html/mov_bbb.mp4" 
      controls 
      class="video"
    ></video>

    <!-- cover-view 覆盖层 -->
    <cover-view class="cover-container">
      <cover-view class="cover-title">视频标题：Big Buck Bunny</cover-view>
      <cover-view class="cover-button" @click="playVideo">播放视频</cover-view>
    </cover-view>
  </view>
</template>

<script setup>
const playVideo = () => {
  const video = document.getElementById('video');
  if (video) video.play();
}
</script>

<style scoped>
/* 容器样式 */
.container {
  position: relative;
  width: 100%;
  height: 300px;
}

/* video 组件样式 */
.video {
  width: 100%;
  height: 100%;
}

/* cover-view 覆盖层样式 */
.cover-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

.cover-title {
  color: white;
  font-size: 20px;
  margin-bottom: 20px;
}

.cover-button {
  padding: 10px 20px;
  background-color: #ffcc00;
  color: black;
  border-radius: 8px;
  font-size: 16px;
}
</style>

2.2 支持的事件与动画

• 说明：cover-view 支持常规的点击和触摸事件，并在微信小程序基础库 2.2.4+ 支持 touch 事件。此外，cover-view 还支持简单的动画过渡效果，例如 transform 和 opacity 属性。
• 使用场景：在视频或地图控件上放置交互按钮，通过点击事件触发播放、暂停等操作。

<template>
  <cover-view class="cover-container" @click="handleClick">
    点击我
  </cover-view>
</template>

<script setup>
const handleClick = () => {
  console.log("cover-view 被点击了！");
}
</script>

<style scoped>
.cover-container {
  width: 100px;
  height: 50px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
</style>

3. 实现视频播放器上的交互案例

以下是一个使用 cover-view 实现视频播放控制的案例。通过覆盖层中的按钮，用户可以点击控制视频的播放和暂停。

<template>
  <view class="container">
    <!-- 视频播放器 -->
    <video id="myVideo" src="https://www.w3schools.com/html/mov_bbb.mp4" controls class="video"></video>

    <!-- 覆盖层，用于显示自定义按钮 -->
    <cover-view class="cover">
      <cover-view class="play-button" @click="playVideo">播放</cover-view>
      <cover-view class="pause-button" @click="pauseVideo">暂停</cover-view>
    </cover-view>
  </view>
</template>

<script setup>
const playVideo = () => {
  const video = document.getElementById('myVideo');
  if (video) video.play();
}

const pauseVideo = () => {
  const video = document.getElementById('myVideo');
  if (video) video.pause();
}
</script>

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

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

.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.play-button, .pause-button {
  padding: 10px 20px;
  background-color: #ffcc00;
  color: black;
  border-radius: 10px;
  cursor: pointer;
}

.play-button {
  margin-left: 20px;
}

.pause-button {
  margin-right: 20px;
}
</style>