uniapp开发进阶：如何优雅地清除顶部状态栏默认样式

水星记_

已于 2023-07-03 15:17:31 修改

阅读量956

点赞数 2

分类专栏： uniapp 文章标签：前端 uni-app

于 2021-06-02 09:40:29 首次发布

本文链接：https://blog.csdn.net/Shids_/article/details/117460096

版权

uniapp 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

前言

在使用 uniapp 开发应用时，你是否遇到过顶部状态栏样式与设计不符的尴尬情况？不用担心！本文将为你详细介绍如何清除顶部状态栏的默认样式，让你的应用更加完美。

只需要在 pages.json 文件中的 style 属性里面加上 "navigationStyle":"custom" 即可。

{
      "path" : "pages/activity/modal/share",
      "style":                                                                                    
      {
         "navigationStyle":"custom"//清除默认样式
      }   
},

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水星记_

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
uniapp开发进阶：如何优雅地清除顶部状态栏默认样式

uniapp开发进阶：如何优雅地清除顶部状态栏默认样式
复制链接

扫一扫

专栏目录

uniapp-tools:uniapp工具类

05-10

5. **UI组件**：uniapp-tools可能还包含了定制的UI组件，比如自定义导航栏、底部TabBar、弹窗提示等，这些组件与uniapp的样式和API紧密结合，可直接应用于项目中，提升应用的界面一致性。 6. **性能优化**：工具库...

cxl-uniapp-template:自用的uniapp的快速开发脚手架

04-07

【标题】"cxl-uniapp-template:自用的uniapp的快速开发脚手架" 涉及的关键技术是UniApp和Vue.js框架，它是一个为了提高开发效率而设计的模板项目。UniApp是一个基于Vue.js的多端开发框架，能够一次编写，多端运行，...

参与评论您还未登录，请先登录后发表或查看评论

uniApp清除上方的状态栏

coisini1206的博客

09-12

605

uniApp清除上方的状态栏

uni-App 去掉顶部导航栏

Sapling

11-22

5284

1、给一个单独的页面隐藏顶部的导航栏，可以在pages.json里单独的路由style下面配置 “app-plus”: {“titleNView”: false}2、给整个app 隐藏可以在globalStyle 下配置一个style “app-plus”: {“titleNView”: false}uni-App 去掉顶部导航栏。

uniapp中去掉顶部导航栏-指定某页面去掉顶部导航栏

程序员老狼专注开发aigc或客服系统应用

04-11

3658

uniapp项目中如果想关闭所有页面的顶部导航栏在page.json中 "globalStyle": { "navigationStyle":"custom", }, 如果是指定某个页面关闭顶部导航栏 ,{ "path" : "pages/index/webview", "style": { ...

uniapp 去掉默认顶部导航栏

weixin_65537918的博客

12-19

432

pages.json 输入以下代码。

uniapp 关闭顶部导航栏

qq_59054812的博客

02-28

1639

有两种方法可以关闭顶部导航栏，在 pages.json 文件里配置。这两种方法最终的效果是一样的，没什么太大区别。

前端：Uniapp 开发后端：JAVA 数据库：MySQL 源码类型：WinForm 后台管理功能：

04-15

前端：Uniapp 开发后端：JAVA 数据库：MySQL 源码类型：WinForm 后台管理功能：

阿里云javasdk源码-uniapp-examples:uniapp开发的一个例子

06-06

针对中小商户、企业和个人学习者开发。使用Java编码，采用SpringBoot、Mybatis-Plus等易用框架，作为前端角色，改造打包，一键启用，简单生成api ，电商后台页面会逐步以前端角色剖析介入这个后端代码目前实现...

uniapp-ts:uniapp+ts 开发小程序的项目最佳实践模板

05-07

uniapp+ts 开发小程序的项目最佳实践模板配置了 vuex，使用模块化，配置了数据持久化使用 vuex-class 里的装饰器写法来定义 state、getter、mutation 等定义通用拦截器内置了 vant 组件内置了 mp-html 富文本展示...

uni-app 之去掉顶部导航

jun_tong的博客

09-22

2689

uni-app 之去掉顶部导航

Uniapp去掉顶部导航栏和路由传参

progrmmmm的博客

01-11

3575

一、去掉顶部导航栏在pages.json中设置这两条参数"navigationStyle":"custom","titleView":false[注意层级不同] 如果想全局取消顶部导航栏,可以在page.json的globalStyle中设置: "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Ebook", "navigationBarBackgroundColor": "#F

uniapp去掉默认导航栏的方法

m0_67755621的博客

04-02

3560

"globalStyle"中添加以下语句即可去掉默认导航栏。 "navigationStyle":"custom",

uniapp项目怎么删除顶部导航栏

Y2000104的博客

01-11

1407

【代码】uniapp项目怎么删除顶部导航栏。

uni-app去除顶部的状态栏

Mr_lilongsha的博客

08-31

3550

uni-app移除顶部的状态栏 带顶部状态的代码移除顶部状态栏后的代码

uni-app去除手机的状态栏(像电量、信号、时间等)

qq_43787947的博客

07-14

2563

【代码】uni-app去除手机的状态栏(像电量、信号、时间等)

现成组件，详细教程：Uniapp去除微信小程序顶部导航栏，但保留标题和返回按钮；组件经多次调优，近乎完美

ChuanyangChen的博客

09-26

5657

这篇文章是在微信小程序原生开发的基础上设计的，但是最近又做到了Uni-app的项目，好巧不巧又得适配小程序端，顶部这个导航栏就有得折腾了。好在之前在原生上折腾过一次，这篇文章就整理一下Uni-app上如何去除这个默认样式后，依旧显示标题和返回按钮。⭕️ 注意：这里我是利用Store去存放“状态栏高度”这个变量，如果你不想用Store，想直接用全局变量也是可以的。没记错的话Uniapp自带Store，不需要安装，只需要创建store文件夹，并编写index.js 文件。至此，组件的准备工作就结束啦。

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

最新发布

04-20

使用uniapp开发京东小程序时，可以通过设置沉浸式状态栏来提升用户体验。沉浸式状态栏是指将状态栏与应用界面融为一体，使应用的内容延伸到状态栏区域，给用户一种全屏的视觉效果。要实现沉浸式状态栏，可以按照以下步骤进行操作： 1. 在uniapp项目的`manifest.json`文件中，找到`"mp-weixin"`或`"mp-alipay"`字段，添加`"window"`属性，并在该属性下添加`"navigationStyle"`属性，将其值设置为`"custom"`。这样可以自定义导航栏样式。 2. 在需要使用沉浸式状态栏的页面的vue文件中，可以通过设置`navigationBarStyle`属性来自定义导航栏样式。例如： ```vue <template> <view>  </view> </template> <script> export default { data() { return { navigationBarStyle: { backgroundColor: '#ffffff', // 导航栏背景色 borderBottom: 'none', // 底部边框线 }, }; }, }; </script> ``` 3. 在App.vue文件中，可以通过设置`onLaunch`生命周期函数来获取系统状态栏高度，并将其保存到全局变量中。例如： ```vue <script> export default { onLaunch() { uni.getSystemInfo({ success: (res) => { uni.setStorageSync('statusBarHeight', res.statusBarHeight); }, }); }, }; </script> ``` 4. 在需要使用沉浸式状态栏的页面的vue文件中，可以通过计算属性获取系统状态栏高度，并设置页面内容的上边距。例如： ```vue <template> <view :style="marginTopStyle">  </view> </template> <script> export default { computed: { marginTopStyle() { const statusBarHeight = uni.getStorageSync('statusBarHeight'); return `margin-top: ${statusBarHeight}px;`; }, }, }; </script> ``` 这样就可以实现在uniapp开发的京东小程序中使用沉浸式状态栏了。