- 当前 Bug 的表现(可附上截图)
这是真机上的效果,border-radius不起作用,地图模式这个view是左上和左下是圆角,现在整个view都是圆角;列表模式这边的view是右上和右下是圆角,现在这个列表模式的view都没有变为圆角
- 预期表现
这是开发者工具上预览的效果,border-radius正常显示
这是wxml代码:
<cover-view style='position:absolute;top:80%;left:0;width:100%;'>
<cover-view style='text-align:center; margin:0 auto;width:202px;border:0rpx solid #e6e6ea;' bindtap="wxSearchTab">
<cover-view class='mapmodel' style=''>地图模式</cover-view>
<cover-view class='listmodel' style=''>列表模式</cover-view>
</cover-view>
</cover-view>
这是wxss样式:
.mapmodel{
/* -webkit-border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
border-radius: 20px 0px 0px 20px; */
border-top-left-radius:20em;
border-top-right-radius:0em;
border-bottom-right-radius:0em;
border-bottom-left-radius:20em;
float:left;
padding-left:0px;
font-size:16px;
line-height:40px;
background:#1998f9;
color:#fff;
width:100px;
height:42px;
}
.listmodel{
/* -webkit-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px; */
border-top-left-radius:0em;
border-top-right-radius:20em;
border-bottom-right-radius:20em;
border-bottom-left-radius:0em;
border:1px solid #1998f9;
float:left;
padding-left:0px;
font-size:16px;
line-height:40px;
background:#fff;
color:#909090;
width:100px;
height:40px;
}
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
看看这里的tip说明:tip第十条
谢啦!cover-view和view差好多啊,view可以实现的功能cover-view好多都实现不了,希望腾讯可以快点更新过来。
记得好像之前哪里看到过,说真机不支持单边圆角,必须是全部圆角才行
是的,view支持单边圆角,cover-view不支持,很无语。。。