收藏
回答

border-radius在开发者工具上显示,在真机上不显示

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS 9.1 iPhone6p 6.7.3

- 当前 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;

}


回答关注问题邀请回答
收藏

2 个回答

  • 2018-11-07

    https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html


    看看这里的tip说明:tip第十条



    2018-11-07
    有用 2
    回复 1
    • 2018-11-08

      谢啦!cover-view和view差好多啊,view可以实现的功能cover-view好多都实现不了,希望腾讯可以快点更新过来。

      2018-11-08
      回复
  • 拾忆
    拾忆
    2018-11-07

    记得好像之前哪里看到过,说真机不支持单边圆角,必须是全部圆角才行

    2018-11-07
    有用 1
    回复 1
    • 2018-11-08

      是的,view支持单边圆角,cover-view不支持,很无语。。。

      2018-11-08
      回复
登录 后发表内容