• cover-view 文本视图
  • 属性说明
  • 示例
    • 代码示例：文本视图
  • 常见问题
    • Q：cover-view 可以使用 border 吗？

cover-view 文本视图

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

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例：文本视图

• SWAN
• JS
• CSS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <canvas
  
  
  
 class="canvas"
  
  
  
 canvas-id="mycanvas">
  
  
  
 <cover-view class="cover-view" scroll-top="5">
  
  
  
 <cover-view class="flex-item demo-text-1"></cover-view>
  
  
  
 <cover-view class="flex-item demo-text-2"></cover-view>
  
  
  
 <cover-view class="flex-item demo-text-3"></cover-view>
  
  
  
 </cover-view>
  
  
  
 </canvas>
  
  
  
 </view>
  
  
  
</view>
 
 
 

设计指南

覆盖在其他原生组件上的视图区域，颜色需与下层元素拉开层次，否则将影响内容识别。

正确

上层元素与下层颜色反差适宜，内容清晰易识别

错误

上层元素与下层颜色接近，内容模糊不清

常见问题

Q：cover-view 可以使用 border 吗？

A：cover-view 为原生组件，原生组件为系统提供的控件不支持单边设置；对于 cover-view 只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible等。