congee
congee
  • 发布:2021-06-15 18:39
  • 更新:2023-02-10 15:49
  • 阅读:2120

【报Bug】nvue页面原生组件无法设置圆角,希望有解决方案,或者可以设置圆角(比如video组件和live-push组件)都无法设置圆角

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 20H2

HBuilderX类型: 正式

HBuilderX版本号: 3.1.19

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: 小米cc9e

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

nvue页面直播推流组件无法设置圆角,video标签好像也不可以,希望官方尽快做出回应...

预期结果:

希望,原生组件也可以设置圆角,可以有更好的定制性

实际结果:

...

bug描述:

uni-app 使用直播推流组件无法加圆角样式,加样式之后没有一点作用,希望尽快解决,网上没有解决方案

2021-06-15 18:39 负责人:无 分享
已邀请:
DCMarvel

DCMarvel

video用圆角view套住,overflow: hidden.

3snn

3snn

iOS直接在原生组件上设置样式,但是有个坑,要么全部圆角,要么都不圆角,不能只设置一个两个或三个角为圆角
class {
border-radius: 12px;
overflow: hidden;
}
安卓上可以用阴影做个内圆角盖住4个角,但是iOS阴影显示规则与安卓不同,所以这种做法不支持iOS
<view class="address-map-wrap">
<map class="address-map"></map>
<view class="address-map-cover address-map-cover-top-left" ></view>
<view class="address-map-cover address-map-cover-top-right"></view>
<view class="address-map-cover address-map-cover-bottom-left"></view>
<view class="address-map-cover address-map-cover-bottom-right"></view>
</view>
样式
.address-map-wrap {
position: relative;
}

.address-map {
border-radius: 12px;
overflow: hidden;
}

.address-map-cover {
position: absolute;
width: 24px;
height: 24px;
border-radius: 12px;
}

.address-map-cover-top-left {
top: 0px;
left: 0px;
box-shadow: -12px -12px 0 0;
}

.address-map-cover-top-right {
top: 0px;
right: 0px;
box-shadow: 12px -12px 0 0;
}

.address-map-cover-bottom-left {
bottom: 0px;
left: 0px;
box-shadow: -12px 12px 0 0;
}

.address-map-cover-bottom-right {
bottom: 0px;
right: 0px;
box-shadow: 12px 12px 0 0;
}

  • 不是发哥

    很好用,就是锯齿有点严重

    2023-05-09 17:59

3snn

3snn

页面模板代码

<view class="address-map-wrap">  
    <map class="address-map"></map>  
    <view class="address-map-cover address-map-cover-top-left"></view>  
    <view class="address-map-cover address-map-cover-top-right"></view>  
    <view class="address-map-cover address-map-cover-bottom-left"></view>  
    <view class="address-map-cover address-map-cover-bottom-right"></view>  
</view>

还要将address-map-cover背景颜色设置与父级容器背景颜色一致

congee

congee (作者)

如有大佬协助,解决,我必感激不尽...

  • 9***@qq.com

    我也遇到这种情况,没有其他的办法的话,只能叫UI做个圆角图片 放上去遮住了

    2021-06-23 11:52

  • 1***@qq.com

    您好 问题解决了吗

    2021-10-30 10:21

4***@qq.com

4***@qq.com

你好, 请问你这个问题解决了嘛?

FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

要回复问题请先登录注册