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

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

1. 修改 pages.json 配置(局部配置)

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

小程序、H5、APP端适用

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

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

2. 检查 globalStyle 配置(全局配置)

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

json 复制代码
"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" 来去除系统的顶部导航栏。

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

相关推荐
丁总学Java30 分钟前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
说私域2 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
qq22951165022 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫9 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦9 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app