创建一个nvue页面，粘贴上面的代码
Reol
- 发布：2023-12-06 16:26
- 更新：2023-12-06 16:57
- 阅读：623
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 11 专业版 22635.2776
HBuilderX类型： 正式
HBuilderX版本号： 3.98
手机系统： Android
手机系统版本号： Android 13
手机厂商： 小米
手机机型： 小米MIX4
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
border-radius：50%;为圆形
overflow：hidden；以圆形裁剪隐藏子元素
border-radius：50%;为圆形
overflow：hidden；以圆形裁剪隐藏子元素
实际结果：
border-radius：100%;为圆形
overflow：hidden；以原始尺寸裁剪隐藏子元素
border-radius：100%;为圆形
overflow：hidden；以原始尺寸裁剪隐藏子元素
bug描述：
<template>
<view style="position: relative;width: 750rpx;height: 1000rpx;background-color: black;">
<view class="ptzControl">
<view class="ptz-item ptz-1"></view>
<view class="ptz-item ptz-2"></view>
<view class="ptz-item ptz-3"></view>
<view class="ptz-item ptz-4"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.ptzControl {
width: 284rpx;
height: 284rpx;
border-radius: 100%;
background: rgba(255,255,255,0.3);
position: absolute;
bottom: 54rpx;
left: 54rpx;
overflow: hidden;
z-index: 2;
.ptz-item {
position: absolute;
width: 284rpx;
height: 284rpx;
z-index: 1;
}
.ptz-1 {
background-color: red;
left: -142rpx;
top: -142rpx;
}
.ptz-2 {
background-color: blue;
right: -142rpx;
top: -142rpx;
}
.ptz-3 {
background-color: yellow;
left: -142rpx;
bottom: -142rpx;
}
.ptz-4 {
background-color: pink;
right: -142rpx;
bottom: -142rpx;
}
}
</style>
爱豆豆 - 办法总比困难多
具体可以参考这个问答：https://ask.dcloud.net.cn/question/114175
应该是weex的问题 但是weex已经停止维护好久了 所以才导致这个问题一直都有
你可以设置子元素的圆角来实现你想要的效果 可以试下下面的代码
<template>
<view style="position: relative;width: 750rpx;height: 1000rpx;background-color: black;">
<view class="ptzControl">
<view class="ptz-item ptz-1"></view>
<view class="ptz-item ptz-2"></view>
<view class="ptz-item ptz-3"></view>
<view class="ptz-item ptz-4"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.ptzControl {
width: 284rpx;
height: 284rpx;
background: rgba(255, 255, 255, 0.3);
position: absolute;
bottom: 54rpx;
left: 54rpx;
overflow: hidden;
border-radius: 100%;
z-index: 2;
display: flex;
flex-wrap: wrap;
.ptz-item {
width: 142rpx;
height: 142rpx;
}
.ptz-1 {
background-color: red;
border-top-left-radius: 284rpx;
}
.ptz-2 {
background-color: blue;
border-bottom-left-radius: 284rpx;
}
.ptz-3 {
background-color: yellow;
border-top-right-radius: 284rpx;
}
.ptz-4 {
background-color: pink;
border-bottom-right-radius: 284rpx;
}
}
</style>
Reol (作者)
好的，谢谢
2023-12-07 10:13