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

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

相关推荐
独立开阀者_FwtCoder7 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
江城开朗的豌豆1 小时前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
aklry2 小时前
uniapp三步完成生成一维码图片
uni-app
幽络源小助理11 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
汤姆yu11 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
雪芽蓝域zzs12 小时前
uniapp 国密sm2加密
uni-app
鱼樱前端14 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆16 小时前
vue3.4中的v-model的用法~
前端·vue.js