cover-view 文本视图

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

# 属性说明

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

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 :文本视图

    <view class="wrap">
        <view class="card-area">
            <map class="map"
                longitude="{{longitude}}"
                latitude="{{latitude}}">
                <cover-view class="cover-view">
                    <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>
            </map>
        </view>
    </view>
    
    Page({
        data: {
            latitude: '40.042500',
            longitude: '116.274040'
        }
    });
    
    .map {
        width: 100%;
        height: 2.67rem;
        border-radius: 8px;
    }
    
    .cover-view {
        opacity: .7;
        position: relative;
        margin: 22% 25%;
        display: flex;
        flex-direction: row;
    }
    
    .flex-item {
        width: .64rem;
        height: .89rem;
    }
    
    .demo-text-1 {
        background: #6895FF;
    }
    
    .demo-text-2 {
        background: #8FB1FF;
    }
    
    .demo-text-3 {
        background: #C3D1FF;
    }
    
    .card-area {
        height: 2.66rem;
    }
    

    设计指南

    DESIGN

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



    正确

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




    错误

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



    # 常见问题

    # Q:cover-view 可以使用 border 吗

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