cover-view loading 样式显示问题: border-top 和 真机样式对不上
Animation.gif
真机显示: 上面什么都没有
image.png
代码复现:
<view class="container">
<cover-view class="">
<cover-view class="helmet-imgloading"></cover-view>
</cover-view>
</view>
.container {
padding-top: 100rpx
}
.helmet-imgloading{
width: 40rpx;
height: 40rpx;
animation: loading1 1s infinite linear;
border: 5rpx solid #222;
border-top: 5rpx solid transparent;
border-bottom: 5rpx solid transparent;
border-radius: 50%;
}
@keyframes loading1{
0%{transform: rotate(0deg)}
50% {
transform: rotate(150deg);
}
100% {
transform: rotate(360deg);
}
}
出现这个问题的原因: cover-view 不支持 border-top, left等之类的单独设置, border-radis 之类的也是同理, 不支持top, bottom 之类的单设, 这里 实际效果变成了 border: 5rpx solid transparent 所以显示不出
解决: 不要用cover-view 之类的来做单设, 可以使用cover-image 配合 animation 动画来解决这个问题
