百度智能小程序 文本视图
cover-view 文本视图
解释：覆盖在原生组件之上的文本视图。只支持嵌套 cover-view、cover-image 组件。客户端创建的原生组件，不支持嵌套在其它组件中使用。
属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
|
scroll-top |
number |
否 |
设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 |
示例
代码示例 ：文本视图
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 等。