uniapp设置隐藏原生导航栏(3)

文章介绍了如何在uni-app中通过pages.json文件配置单个页面或所有页面隐藏导航栏,以及使用CSS实现隐藏。两种方式分别适用于特定页面和全局应用样式。
摘要由CSDN通过智能技术生成

1、单个页面隐藏

 在pages.json里配置 (第一种方式)

{
		"path": "pages/home/index",
		"style": {
			"navigationBarTitleText": "首页",
			"navigationStyle": "custom" // 使用自定义导航栏,系统会关闭默认的原生导航栏
		}
}

 第二种方式

{
		"path": "pages/home/index",
		"style": {
			"navigationBarTitleText": "首页",
			"app-plus": {
				"titleNView": false //禁用原生导航栏  
			}
		}
}

2、所有页面隐藏

在pages.json里配置

{
	"pages": [{
		"path": "pages/home/index",
		"style": {
			"navigationBarTitleText": "首页"
		}
	}],
	"globalStyle": {
		"app-plus": {
			"titleNView": false //禁用原生导航栏  
		},
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "首页",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#F6F6F6",
		"onReachBottomDistance": 200
	}
}

 或者使用css隐藏


    uni-page-head { 
        display: none; 
    } 

成功之后就是这样

漏发了一篇uniapp pages.json配置的文章下篇补

  • 10
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值