阅读(2711) 赞(10)

百度智能小程序文本视图

2020-08-11 17:35:27 更新

cover-view 文本视图

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

属性说明

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

示例

在开发者工具中打开

1597198417(1)

代码示例：文本视图

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

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