uniapp H5 关掉全部头部header

于 2024-09-11 15:42:32 发布
阅读量294 收藏
点赞数 3
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39016177/article/details/142141749
版权

uniapp H5 关掉全部头部header

1.进入pages.json文件

 "globalStyle": {
    //"navigationStyle": "custom",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },

示例
在这里插入图片描述

2.注释"navigationStyle": "custom"解开 即可

  "globalStyle": {
    "navigationStyle": "custom",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }

示例
在这里插入图片描述

诸君有用且点赞

qq_39016177
关注
uniapp s搜索功能实现
weixin_41558808的博客
01-11 5249
uni-app从零开始
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
shuux666的博客
03-03 735
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
uni-app去除页面头部的标题栏
weixin_45966674的博客
03-01 3209
我们只需要在pages.json中 指定page的 style中加入。配置在我们项目根目录的 pages.json中。uniapp项目 每个界面都会有一个标题栏。对应的page 就没有这个标题栏了。上面还是有一条黑的 体验非常差。
uniapp 如何去掉头部默认导航
weixin_43337481的博客
04-07 2177
uniapp h5去掉头的方法： 首先找到并打开“pages.json”文件； 然后在“pages.json”文件中添加一行“"navigationStyle":"custom"”代码即可
uniapp（H5）取消head和三目运算
weixin_34927844的博客
08-12 1989
最近用uniapp在写一个公众号的项目，开发的的时候是用微信开发者工具来进行开发，经理说之后发布的时候选择h5就行了，果不其然遇到坑了（其实也不算上面坑，可能是自己写代码不规范），首先最大的一个问题就是每个页面顶部的head，一开始配置titleNView发现没有效果，后来发现在app.vue中设置 /* #ifdef H5 */ uni-page-head { ...
uniapp去除顶部标题栏
heliang399的博客
09-04 845
其实很简单，只需两个步骤即可彻底除掉，首先找到项目文件夹下的pages.json路由文件点开，在这个文件里可以看到你创建的所有页面，然后在你想要去除头部标题栏的页面中添加"navigationStyle": "custom"即可去除😁
uniapp开发进阶：如何优雅地清除顶部状态栏默认样式
希望看完文章的你能够带着答案离开
06-02 997
uniapp开发进阶：如何优雅地清除顶部状态栏默认样式
uniapp 自定义map组件
weixin_43073383的博客
07-15 696
uniapp 自定义map组件 1、地图附近相关数据引用高德 2、key自己申请 3、附带城市选择 4、项目引入的是graceui，请自行修改 5、调用相关自行处理 注意：直接引用不可用，仅限参考、仅限参考、仅限参考 addressChoose.vue <template> <aPage :footerHeight="0"> <!-- 页面头部 --> <view slot="gHeader" class="grace-he
uniapp同步开发h5+小程序双平台踩坑记录
近10年前端开发工作经验，为你分享日常经验所得
04-23 2096
记录使用uniapp同步开发h5和小程序的坑
uni app 自定义 头部组件（2） 局部 右侧按钮
sani_x的博客
11-07 5021
uni app 局部自定义头部的修改
uni-app设置全局属性globalStyle
star_of_science的博客
08-03 1万+
uni-app修炼之路（五） 参考官方文档：https://uniapp.dcloud.io/collocation/pages 应用的状态栏、导航条、标题、窗口背景色等这些公共的样式一般情况下都会写在globalStyle里面。这样页面就无需进行单独的配置了。 属性 类型 默认值 描述 平台差异说明 navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色（同状态栏背景色） APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
uni-app 小程序显示顶部，h5页面隐藏顶部
xm2395939的博客
04-03 9680
H5端去除小程序的顶部解决方案 思路： 1.使用uni-app /*#ifdef H5 */判断是否为h5 2.找到生成的<uni-page-head></uni-page-head> 3.在app.vue设置h5时生效display:none ...
Android实战跑腿项目——gradle配置
aming小老弟
08-27 653
QQ 1274510382 Wechat JNZ_aming 商业联盟 QQ群538250800 技术搞事 QQ群599020441 解决方案 QQ群152889761 加入我们 QQ群649347320 共享学习 QQ群674240731 纪年科技aming 网络安全 ,深度学习,嵌入式,机器强化,生物智能,生命科学。 ...
uni-App 去掉顶部导航栏
weixin_30323631的博客
08-13 3967
给一个单独的页面隐藏顶部的 导航栏 可以在pages.json里 单独的路由style下面配置"app-plus": {"titleNView": false} 给整个app 隐藏 可以在globalStyle 下 配置一个style "app-plus": {"titleNView": false} 转载于:https://www.cnblogs....
uniapp关闭顶部导航栏
qq_43789598的博客
09-17 780
uniapp关闭顶部导航栏
uni-app 去掉H5顶部标题栏
weixin_48495574的博客
04-21 3121
问题描述： 解决:在pages.json文件的globalStyle对象里加上 "navigationStyle":"custom",
uni-app全局组件引用
热门推荐
qq_37902065的博客
12-07 2万+
1 components文件下的vue文件 &lt;template name="page-head"&gt; &lt;view class="uni-page-head"&gt; &lt;view class="uni-page-head-title"&gt;{{title}}&lt;/view&gt; &lt;/view&gt; &lt;/tem
uni-app禁用原生导航
每文的博客
02-13 7039
最近在使用uni-app开发毕设，遇到一个需求是去掉原生导航，可是去掉后，发现整个页面直接顶到手机通知栏里面去了，处理如下： 去掉原生导航：（pages.json） "globalStyle" : { "navigationStyle":"custom" } 处理页面溢出问题： https://ask.dcloud.net.cn/article/34921 http://...
uni-app 内部打开外部页面，并自定义头部
最新发布
10-13
UniApp是一个基于Vue.js的跨平台框架，它允许开发者编写一次代码，构建iOS、Android、Web和H5应用。要在UniApp内部通过路由跳转并自定义头部导航，你可以按照以下步骤操作： 1. 安装插件：首先，在uni-app项目中安装`@dcloudio/uni-stat`插件，用于管理页面间的跳转，命令行输入： ``` npm install @dcloudio/uni-stat --save ``` 2. 创建头部组件：创建一个名为`Header.vue`的组件，用于定义统一的头部样式和功能，例如标题和返回按钮。 ```html <template> <view class="header"> <navigator-bar title="自定义标题" :return-type="backType"></navigator-bar> </view> </template> <script setup> import { navigatorBar } from '@dcloudio/uni-stat'; const backType = 'web'; // 根据需要选择返回类型 web 或者 app // 使用navigatorBar，可以控制返回按钮的行为 function handleBack() { if (backType === 'web') { uni.navigateBack(); } else { navigatorBar.close(); // 如果是app模式，关闭当前页 } } onMounted(() => { // 初始化头部组件 }); </script> ``` 3. 跳转到外部链接：在你需要打开外部链接的地方，使用`uni.navigateToExternalUrl`，同时传入头部组件作为导航栏。 ```javascript <button @click="handleExternalLink">打开外部链接</button> <script> import Header from '@/components/Header.vue'; ... methods: { async handleExternalLink() { const header = new Header(); // 初始化头部实例 await uni.navigateToExternalUrl('http://www.example.com', { customView: header }); }, } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_39016177

你的鼓励将是我最大的创作动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值