收藏
回答

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-07-13

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

    2018-07-13
    赞同
    回复 3
  • 王玉华
    王玉华
    2018-09-03

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

    2018-09-03
    赞同
    回复
登录 后发表内容