收藏
回答

cover-view的CSS效果在实机上和开发者工具完全不一样

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 1.02.1806120
  • 手机:华为荣耀V10

  • 微信版本:6.6.7

  • 开发者工具版本:v.1.02.1806120

  • 调试基础库:2.1.3


开发者工具情况:


实际情况:


两个按钮的CSS代码:

.box .pre_box{
  float: left;
  margin-top: 25vh;
  background-color: #000;
  opacity: 0.5;
  border-radius: 0px 50px 50px 0px;
  width: 15%;
  height: 25vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.box .next_box{
  float: right;
  margin-top: 25vh;
  background-color: #000;
  opacity: 0.5;
  border-radius: 50px 0px 0px 50px;
  width: 15%;
  height: 25vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


按钮的WXML写法:

<cover-view class='pre_box'>
  <cover-view class='btn_pre'><</cover-view>
</cover-view>
<cover-view class='next_box'>
  <cover-view class='btn_next'>></cover-view>
</cover-view>


可能的原因:

    微信小程序内置的解释器和小程序开发工具对  border-radius 属性的理解不一样,当写 border-radius : 50%时, 微信小程序和小程序的效果非常接近。



请问兄弟们有没有好的解决方法,这个或许是微信小程序的一个bug?

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

2 个回答

  • 王玉华
    王玉华
    2018-09-03

    我也遇到这个问题,只识别第一个设置值,没办法画半圆,希望官方早日解决

    2018-09-03
    有用
    回复
  • 是小白啊
    是小白啊
    2018-07-13

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-07-13
    有用
    回复 3
    • Link2Bond
      Link2Bond
      2018-07-13

      wechatide://minicode/IBYfximo6AYL

      2018-07-13
      回复
    • 是小白啊
      是小白啊
      2018-07-13回复Link2Bond

      你好,你所提供的代码片段没有涉及到你所描述的问题

      2018-07-13
      回复
    • Link2Bond
      Link2Bond
      2018-07-13回复是小白啊

      没有代码片段完全涉及到我所描述的问题,cover-view中确实对border-radius的支持较少,没法实现我想要的效果

      2018-07-13
      回复
登录 后发表内容