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;
    }
    

    # 常见问题

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

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