title: cover-view 文本视图 header: develop nav: component sidebar: view_cover-view

webUrl: https://qft12m.smartapps.cn/component/cover-view/cover-view

解释：覆盖在原生组件之上的文本视图。只支持嵌套cover-view、cover-image组件。客户端创建的原生组件，不支持嵌套在其它组件中使用。

属性说明

属性 类型 默认值 必填 说明
scroll-top number 否 设置顶部滚动偏移量，仅在设置了overflow-y: scroll成为滚动元素后生效

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/cover-view/cover-view - 图1 请使用百度APP扫码

代码示例 ：文本视图

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <map class="map"
  4.             longitude="{{longitude}}"
  5.             latitude="{{latitude}}">
  6.             <cover-view class="cover-view">
  7.                 <cover-view class="flex-item demo-text-1"></cover-view>
  8.                 <cover-view class="flex-item demo-text-2"></cover-view>
  9.                 <cover-view class="flex-item demo-text-3"></cover-view>
  10.             </cover-view>
  11.         </map>
  12.     </view>
  13. </view>
  1. Page({
  2.     data: {
  3.         latitude: '40.042500',
  4.         longitude: '116.274040'
  5.     }
  6. });
  1. .map {
  2.     width: 100%;
  3.     height: 2.67rem;
  4.     border-radius: 8px;
  5. }
  7. .cover-view {
  8.     opacity: .7;
  9.     position: relative;
  10.     margin: 22% 25%;
  11.     display: flex;
  12.     flex-direction: row;
  13. }
  15. .flex-item {
  16.     width: .64rem;
  17.     height: .89rem;
  18. }
  20. .demo-text-1 {
  21.     background: #6895FF;
  22. }
  24. .demo-text-2 {
  25.     background: #8FB1FF;
  26. }
  28. .demo-text-3 {
  29.     background: #C3D1FF;
  30. }
  32. .card-area {
  33.     height: 2.66rem;
  34. }

:::