cover-view

# cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image

cover-view 在uni-app x的app、web、微信小程序上，已废弃，使用view即可。

在其他小程序平台，某些原生组件（如map、canvas、video）不支持同层渲染，仍需要cover-view来覆盖。

# 兼容性

Web	微信小程序	Android	iOS
4.0	4.41	4.53	4.53

注意

app 端并不是在运行时实现了cover-view组件，仅仅是编译器把cover-view编译为了view。

# 属性

名称

类型

默认值

兼容性

描述

scroll-top

number/string

# 示例

hello uni-app x

Template

Script

<template>
  <view>
    <page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
    <view class="uni-padding-wrap uni-common-mb">
      <text class="uni-subtitle-text">注意：Web和App需正确配置地图SDK的Key才能正常显示地图组件</text>
    </view>
    <view class="cover-content">
      <map :latitude="latitude" :longitude="longitude"></map>
      <cover-view class="cover-view">简单的cover-view</cover-view>
      <cover-image class="cover-image" src="/static/uni.png"></cover-image>
    </view>
  </view>
</template>



<style>
  map {
    width: 100%;
    height: 600px;
  }

  .cover-content {
    position: relative;
  }

  .cover-view {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 375rpx;
    text-align: center;
    background-color: #DDDDDD;
  }

  .cover-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 96px;
    height: 96px;
  }

  .tips {
    font-size: 12px;
    margin-top: 15px;
    opacity: .8;
  }
</style>