uniapp+vue3+vite+uni-ui 如何实现 APP端 H5 微信小程序同时隐藏原生底部导航栏

分类：uni-app

uniapp

目前只有微信小程序生效， app和H5一直有原生底部导航栏

2025-12-04 00:05 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

要实现在 uniapp + vue3 + vite + uni-ui 中 APP、H5 和微信小程序同时隐藏原生底部导航栏，需正确配置 pages.json 并注意平台差异：

统一配置 pages.json：
```
{  
"globalStyle": {  
"navigationStyle": "custom",  
"app-plus": {  
  "titleNView": false  
}  
}  
}
```
- navigationStyle: "custom" 适用于 H5 和小程序
- app-plus.titleNView: false 专门用于 App 端隐藏原生导航栏
注意事项：
- App 端需在 manifest.json 中确认 "transmission": "none"
- 非 H5 端需处理状态栏高度，避免内容被覆盖：<view style="height: var(--status-bar-height);"></view>
- 微信小程序已支持 navigationStyle: "custom"
- H5 端可能需要额外 CSS 处理

API 方式补充（页面 onLoad 中）：

// #ifdef APP-PLUS || H5  
uni.hideNavigationBar({ animation: false });  
// #endif

若仍无效，请检查：

内容为 AI 生成，仅供参考

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