Uniapp去除顶部导航栏-小程序、H5、APP适用

在 UniApp 中，"globalStyle" 配置项用于设置全局样式，特别是用于小程序、App 和 H5 页面上的导航栏样式。

1. 修改 pages.json 配置（局部配置）

如果你希望特定页面去除顶部导航栏，可以在pages配置"navigationStyle": "custom"实现：

小程序、H5、APP端适用

在 pages.json 中配置小程序页面的导航栏：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom" // 去除对应页面的导航栏
      }
    }
  ]
}

2. 检查 globalStyle 配置（全局配置）

在 globalStyle 配置中，titleNView: false 对H5、App 端有效，而不适用于小程序。下面是一个通用的 globalStyle 配置示例：

"globalStyle": {
  "navigationBarTextStyle": "black", // 导航栏文字颜色
  "navigationBarTitleText": "xxxx", // 导航栏标题
  "navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景色
  "backgroundColor": "#F8F8F8", // 页面背景色
  "titleNView": false, // 去除App、H5的顶部导航
  "navigationStyle": "custom"//去除小程序顶部导航栏
}

注意：

• App端："titleNView": false 去除系统的导航栏，这时你可以使用 navigationStyle: 'custom' 配合自定义的 NView 来创建自己的顶部导航。
• H5端："titleNView": false 可以直接去掉浏览器的默认导航栏，通常是指顶部的页面标题栏，适合用于自定义布局。

小结：

• H5端："titleNView": false 会去除顶部浏览器的默认导航栏。
• App端："titleNView": false 也会去除系统的默认导航栏，你需要自定义导航栏。
• 小程序端：配置 navigationStyle: "custom" 来去除系统的顶部导航栏。

这样，在你去除顶部导航栏后，可以根据需求实现自定义的导航栏，或者仅保留页面内容而不显示任何默认的导航元素。

原文地址：https://blog.csdn.net/m0_47814717/article/details/143593831

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！