cover-view
A text view overlaid on top of native components.
When using video, in order to cover relevant information on the video, you need to use the cover-view component.
But "only nested cover-view and cover-image are supported, and buttons can be used in cover-view." There will be various problems when nesting other components, such as not displaying or reporting an error.
question:
When the cover-view uses the text content to open the container, the text is incomplete and cropped, even adding padding is invalid.
(There is no problem on the development platform, but there will be problems on the real machine)
<!--item 内元素pr /give 根据内容自适应居中-->
<cover-view class="item">
<cover-view class="pr">214</cover-view>
<cover-view class="give">测试512个</cover-view>
</cover-view>
Solve the problem:
1. Set a fixed width. (This method cannot be used when the width needs to be set according to the content)
2. Add a label inside to expand a certain width.
<cover-view class="item">
<cover-view class="pr">
<cover-view class="nofont"></cover-view>
214
<cover-view class="nofont"></cover-view>
</cover-view>
<cover-view class="give">
<cover-view class="nofont"></cover-view>
测试512个
<cover-view class="nofont"></cover-view>
</cover-view>
</cover-view>
.item{
width: 100%;
height: 26rpx;
font-size: 22rpx;
text-align: center;
}
.item .pr{
display: inline-block;
font-family: -apple-system;
}
.item .give{
display: inline-block;
font-family: -apple-system;
color: #ff6934;
}
.item .nofont{
display: inline-block;
width: 6rpx;
height: 26rpx;
}
Note:
Someone also raised this issue on the official forum, but it has not been resolved until now (2019-06-21).