百度智能小程序 文本視圖

cover-view 文本視圖

解釋：覆蓋在原生組件之上的文本視圖。只支持嵌套 cover-view、cover-image 組件?？蛻舳藙?chuàng)建的原生組件，不支持嵌套在其它組件中使用。

屬性說明

示例

在開發(fā)者工具中打開

代碼示例 ：文本視圖

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ū)域，顏色需與下層元素拉開層次，否則將影響內(nèi)容識(shí)別。

常見問題

Q：cover-view 可以使用 border 嗎

A: cover-view 為原生組件，原生組件為系統(tǒng)提供的控件不支持單邊設(shè)置；對(duì)于 cover-view 只支持基本的定位、布局、文本樣式。不支持設(shè)置單邊的 border、background-image、shadow、overflow: visible 等。