uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法

简介: uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法

方法1:在pages.json

{
    ...
  "pages": [ 
    {
      "path": "XXXX",
      "style": {
        "navigationBarTitleText": "导航栏",
        "navigationStyle": "custom" // 使用自定义导航栏,系统会关闭默认的原生导航栏
      }
    }, 
        ...
    ]
    ...   
}

原生小程序也可以采用类似的方法去掉顶部,让头部变透明

image.png

方法2:在pages.json

{
    ...
  "pages": [ 
    {
      "path": "XXXX",
      "style": {
        "navigationBarTitleText": "导航栏",        
          "app-plus": {
            "titleNView": false //禁用原生导航栏  
          }
      }
    }, 
        ...
    ]
    ...   
}

方法3:用css隐藏

/* #ifdef H5 */ 
    uni-page-head { 
        display: none; 
    } 
/* #endif */

如果要禁用所有页面的导航栏

在pages.json

{
    ...
  "globalStyle": {
    "app-plus": {
      "titleNView": false //禁用原生导航栏  
    },
        ...
  },
    ...
}


相关文章
|
1月前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
27天前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
34 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
142 1
uniapp一个人开发APP关键步骤和考虑因素
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
82 1
|
2月前
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
340 3
|
2月前
|
Web App开发 移动开发 前端开发
uniapp环境H5运行及发行(入门必学)
uniapp环境H5运行及发行(入门必学)
251 5
|
2月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
61 1
|
2月前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
33 0
下一篇
DataWorks