小程序cover-view loading 样式显示问题

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 动画来解决这个问题