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

这篇具有很好参考价值的文章主要介绍了uniapp设置隐藏原生导航栏(三)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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设置隐藏原生导航栏(三),Uniapp,uni-app,前端,java

漏发了一篇uniapp pages.json配置的文章下篇补文章来源地址https://www.toymoban.com/news/detail-820692.html

到了这里,关于uniapp设置隐藏原生导航栏(三)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Uniapp uni-app学习与快速上手

    个人开源uni-app开源项目地址:准备中 在线展示项目地址:准备中 什么是uni-app uni,读 you ni ,是统一的意思。 Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位,致力于推进HTML5发展构建,HTML5生态。 2012年,DCloud开始研发小程序技术,优化webvie

    2024年02月09日
    浏览(58)
  • uni-app小程序实现音频播放,uniapp播放录音,uniapp简单实现播放录音

    复制到.vue文件即可预览效果 问题 :开发者工具中.onTimeUpdate方法可能会失效! 官方参考:https://uniapp.dcloud.net.cn/api/media/audio-context.html# 其他博客参考:https://blog.csdn.net/weixin_45328705/article/details/114091301 录音实现参考 :https://blog.csdn.net/weixin_43992507/article/details/129857780

    2024年02月12日
    浏览(73)
  • 【UniApp】-uni-app-项目实战页面布局(苹果计算器)

    经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 打开 HBuilderX,点击左上角 文件 - 新建 - 项目 : 项目创建完毕之后,首先来分析

    2024年02月04日
    浏览(63)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(73)
  • #Uniapp:uni-app中vue2生命周期--11个

    uni-app中vue2生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件

    2024年02月02日
    浏览(48)
  • 【Uni-App】uniapp使用uview实现弹出键盘输入密码/验证码功能

    组件使用的是uview组件,Keyboard 键盘和MessageInput 验证码输入两个组件配合使用。 通过mode参数定义键盘的类型,v-model绑定一个值为布尔值的变量,我绑定的是showKeyboard变量,控制键盘的弹出与收起; mode = number (默认值)为数字键盘,此时顶部工具条中间的提示文字为\\\"数字键盘

    2023年04月16日
    浏览(66)
  • 【uni-app】【Android studio】手把手教你运行uniapp项目到Android App

    选择运行到Android App基座 选择运行项目 1、连接手机,在手机上选择 传输文件。 2、打开 设置 - 关于本机 - 版本信息 -连续点击4-5次 版本号 ,输入手机密码,系统就进入了开发者模式。 3、 设置 其他设置 开发者选项 打开 开发者选项 打开 USB调试 。 4、回到Hbuilder,点击刷新

    2024年02月09日
    浏览(51)
  • miniprogram-to-uniapp使用指南(各种小程序项目转换为uni-app项目)

    小程序分类:uni-app qq小程序 支付宝小程序 百度小程序 钉钉小程序 微信小程序 小程序转成uni_app 小程序转为uni_app 小程序转uni_app 小程序转换 工具现在支持npm全局库、HBuilderX插件两种方式使用,任君选择,HBuilderX插件地址:https://ext.dcloud.net.cn/plugin?id=2656 【miniprogram-to-uniapp】

    2024年02月08日
    浏览(55)
  • uni-app开发微信小程序,checkbox、radio等原生组件样式设置问题解决方案

    它们是 原生 的组件,修改样式只能在 app.vue 里面修改,目前只知道这一种解决办法。如果你的UI给的图比较特殊,用css写比较困难,推荐使用图片代替,请看下面示例。 正确设置✔:在App.vue文件里设置 test.vue文件(这里假设你使用checkbox或者radio的组件): App.vue文件(这里

    2024年02月19日
    浏览(61)
  • uni-app的优缺点;uniapp进行条件编译的两种方法;小程序端和H5的代表值

    目录 uni-app的优缺点 优点: 1.跨平台开发: 2.统一的开发语言: 3.高效的性能: 4.丰富的生态圈: 缺点: 1.平台差异性: 2.性能限制: 3.对新特性支持滞后: Uni-app条件编译 process.env.UNI_PLATFORM 变量: 使用 process.env.NODE_ENV 变量: Uni-app中的代表值 Uni-app 是一个跨平台的开发框架

    2024年02月08日
    浏览(122)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包