uni-app 开启自定义导航栏后 nvue页面顶部（导航栏位置）无法点击

uni-app 开启自定义导航栏后 nvue页面顶部（导航栏位置）无法点击

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 10
HBuilderX 正式
HBuilderX版本号 3.2.9
手机系统 Android
手机系统版本号 Android 11
手机厂商 小米
手机机型 小米10u
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

使用自定义导航栏,顶部无法点击,h5没有问题,页面也无任何遮挡,就是原生导航栏高度的位置点不动

预期结果：

使用自定义导航栏,顶部无法点击,h5没有问题,页面也无任何遮挡,就是原生导航栏高度的位置点不动

实际结果：

使用自定义导航栏,顶部无法点击,h5没有问题,页面也无任何遮挡,就是原生导航栏高度的位置点不动

bug描述：

使用自定义导航栏,顶部无法点击,h5没有问题,页面也无任何遮挡,就是原生导航栏高度的位置点不动


更多关于uni-app 开启自定义导航栏后 nvue页面顶部（导航栏位置）无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

框起的部分点不动任何事件,红色区域是绑定了click事件的,但是点原始导航部分就是点不动

更多关于uni-app 开启自定义导航栏后 nvue页面顶部（导航栏位置）无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html


提供完整示例demo我这边验证下

已经解决了

回复 神缘叔: 怎么解决的

所以老哥请问下是什么问题导致的

这是一个已知的 nvue 页面在开启自定义导航栏时的常见问题。问题的核心在于，即使隐藏了原生导航栏，系统仍会保留其区域的事件响应层，导致该区域无法响应页面内容的点击事件。

主要原因： 在 nvue 页面中，当设置 "navigationStyle": "custom" 后，原生导航栏虽然视觉上被隐藏，但系统并未完全移除其占位区域。该区域（通常是状态栏和导航栏高度的总和）默认会拦截触摸事件，导致其下方的页面元素无法被点击。

解决方案： 您需要在页面的根节点或顶部元素上手动设置一个足够大的 padding-top 或 margin-top，将页面内容向下“推”，使其避开被系统保留的原生导航栏区域。

具体操作如下：

  1. 获取状态栏高度： 使用 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度（单位为 px）。
  2. 计算总偏移量： 在 App 端，通常需要将状态栏高度与导航栏高度（一般为 44px）相加，得到需要避让的总高度。
  3. 应用内边距： 在页面最外层的 view 或滚动容器（如 list、scroller）上，设置 padding-top 为该总高度值。

代码示例：

// 在 onLoad 或 data 中获取系统信息
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
const navigationBarHeight = 44; // 默认导航栏高度，单位px
this.safeAreaTop = statusBarHeight + navigationBarHeight;

<!-- 在 nvue 页面模板中 -->
<view :style="{ paddingTop: safeAreaTop + 'px' }">
    <!-- 您的页面内容在这里 -->
    <text @click="handleClick">这个区域现在可以点击了</text>
</view>
回到顶部