1***@qq.com

发布：2026-01-30 14:53
更新：2026-01-30 14:53
阅读：18

【报Bug】nvue页面overflow: hidden;无效

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 15.5 (24F74)

HBuilderX类型：正式

HBuilderX版本号： 4.66

手机系统： Android

手机系统版本号： Android 14

手机厂商：华为

手机机型： HarmonyOS

页面类型： nvue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

“‘
<template>
<view class="box">
<view class="arcbar-left" :style="{ top: leftTop + 'rpx' }"></view>
<view class="arcbar-right" :style="{ top: rightTop + 'rpx' }"></view>
<view class="nav"> </view>
<view class="fotter"> </view>
</view>
</template>

<script setup>
import { computed, defineProps } from 'vue'

// 接收外部传入的进度值（0-1）和主标题（心率数字）
const props = defineProps({
progressValue: {
type: Number,
default: 0,
},
})

// 将0-1的scale转为0-100的进度百分比
const progressPercent = computed(() => Math.min(Math.max(props.progressValue * 100, 0), 100))

// 左侧进度块的top值（适配66rpx容器）
const leftTop = computed(() => {
// 0-50%时
if (progressPercent.value <= 50) {
return 46 - (progressPercent.value / 50) * 46
}
return 0
})

// 右侧进度块的top值（适配66rpx容器）
const rightTop = computed(() => {
// 0-50%时
if (progressPercent.value <= 50) {
return -46
}
// 50%-100%时
return -46 + ((progressPercent.value - 50) / 50) * 46
})
</script>

<style scoped>
.box {
width: 66rpx;
height: 66rpx;
border-radius: 50%;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
clip-path: inset(0 0 0 0);
background-color: #f2f2f2;
z-index: 5;
}

.nav {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 5rpx;
left: 5rpx;
z-index: 10;
}

/ 左侧进度块（0-50%） /
.arcbar-left {
width: 33rpx;
height: 46rpx;
background-color: #f63a29;
position: absolute;
left: 0;
z-index: 2;
transition: top 0.3s ease;
}

/ 右侧进度块（50-100%） /
.arcbar-right {
width: 33rpx;
height: 46rpx;
background-color: #f63a29;
position: absolute;
right: 0;
z-index: 2;
transition: top 0.3s ease;
}

.fotter {
width: 66rpx;
height: 20rpx;
background-color: #000;
position: absolute;
bottom: 0;
left: 0;
z-index: 8;
}
</style>

’”

操作步骤：

将当前组件引入nvue页面，并设置progressValue为0～1，会发现超出父级部分无法隐藏

预期结果：

超出父级部分隐藏

实际结果：

超出父级部分未隐藏

bug描述：

我想在nvue页面手动实现一个心率变化的圆环图，但是arcbar-left、arcbar-right标签超出box的部分始终无法被裁剪掉，overflow: hidden;无效。clip-path: inset(0 0 0 0);也不行。请问如何实现超出父级部分隐藏呢。

2026-01-30 14:53 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

该问题请在专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

【结论】
在 nvue 里 overflow: hidden、clip-path 等裁剪样式确实会被忽略，这不是框架 bug，而是 nvue 原生渲染引擎的已知限制。官方文档已明确说明 nvue 仅支持 flex 布局子集，不支持 overflow/clip-path 等属性。

因此，要实现“超出父级部分隐藏”，只能绕开样式裁剪，采用以下任一替代思路：

✅ 推荐方案 1：物理遮罩（最简单）

把父容器做成一个实心圆，让子元素始终不超出圆边界即可。
示例思路：

父容器 .box 保持 66rpx × 66rpx 并设置 border-radius: 50%。
不再用两个矩形条，而是改用 两个半圆环 作为进度条：
- 左半圆环：宽度 33rpx、高度 66rpx，只显示左侧 180°。
- 右半圆环：同理。
通过 transform: rotate() 控制半圆环的旋转角度，而不是移动 top。
这样天然不会超出圆形区域，也不需要 overflow。

✅ 推荐方案 2：canvas 2d 绘制（最灵活）

nvue 支持 <canvas> 组件，可直接用 Canvas 2d API 画圆环进度：

// 示例伪代码  
const ctx = uni.createCanvasContext('arcCanvas', this);  
ctx.arc(33, 33, 30, -Math.PI/2, -Math.PI/2 + 2*Math.PI*progress);  
ctx.stroke();  
ctx.draw();

优点：

精确控制，不会出现裁剪问题。
性能优于大量 dom 节点。

✅ 推荐方案 3：改用 vue 页面

如果业务允许，把当前页面改为 .vue 后缀即可完整使用 overflow: hidden、clip-path、border-radius 等标准样式。

⚠️ 注意事项

nvue 已处于维护末期，官方建议新项目优先考虑 uni-app x（uvue）。
若仍需 nvue，建议锁定 HBuilderX 最新正式版（≥4.87），但 overflow 限制不会解除。
插件市场已有成熟圆环进度组件，可搜索关键词“圆环进度”、“arc-progress”直接复用：插件市场。

一句话总结

在 nvue 中无法通过样式裁剪超出内容，请改用“物理遮罩 + 半圆环旋转”、“canvas 绘制”或“迁移到 vue 页面”三种方式之一即可达成需求。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

【报Bug】nvue页面overflow: hidden;无效

操作步骤：

将当前组件引入nvue页面，并设置progressValue为0～1，会发现超出父级部分无法隐藏

预期结果：

超出父级部分隐藏

实际结果：

超出父级部分未隐藏

bug描述：

1 个回复

✅ 推荐方案 1：物理遮罩（最简单）

✅ 推荐方案 2：canvas 2d 绘制（最灵活）

✅ 推荐方案 3：改用 vue 页面

⚠️ 注意事项

一句话总结

公告

相关问题

【报Bug】nvue页面overflow: hidden;无效

操作步骤： 将当前组件引入nvue页面，并设置progressValue为0～1，会发现超出父级部分无法隐藏

预期结果： 超出父级部分隐藏

实际结果： 超出父级部分未隐藏

bug描述：

与内容相关的链接

1 个回复

✅ 推荐方案 1：物理遮罩（最简单）

✅ 推荐方案 2：canvas 2d 绘制（最灵活）

✅ 推荐方案 3：改用 vue 页面

⚠️ 注意事项

一句话总结

公告

相关问题

操作步骤：

将当前组件引入nvue页面，并设置progressValue为0～1，会发现超出父级部分无法隐藏

预期结果：

超出父级部分隐藏

实际结果：

超出父级部分未隐藏