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等。