uniapp改变底部安全区顶部手机信号时间电池栏颜色样式

 更新时间:2023年03月05日 14:21:00   作者:tangdou369098  
这篇文章主要为大家介绍了uniapp改变底部安全区顶部手机信号时间电池栏颜色样式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

底部安全区域

uniapp 的默认安全区域的颜色是白色,如果我们做了沉浸式页面,背景色也是白色的话,就会看不到电池栏,等的颜色,如何修改呢?

原始状态

下图是底部安全区原始状态,感觉和整个页面格格不入

修改代码配置safearea

  • manifest.json(下面代码仅支持ios)
// 在app-plus下配置:
"safearea": { //安全区域配置,仅iOS平台生效    
    "background": "#F5F6F9", //安全区域外的背景颜色,默认值为"#FFFFFF"    
    "bottom": { // 底部安全区域配置    
        "offset": "none|auto" // 底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"    
    }  
}, 
  • manifest.json(下面代码支持android)
写法一:
	// #ifdef APP-PLUS
	var Color = plus.android.importClass("android.graphics.Color");
	plus.android.importClass("android.view.Window");
	var mainActivity = plus.android.runtimeMainActivity();
	var window_android = mainActivity.getWindow();
	window_android.setNavigationBarColor(Color.parseColor("#eb8c76"));
	// #endif
写法二:
        // #ifdef APP-PLUS
	let color, ac, c2int, win;
	color = plus.android.newObject("android.graphics.Color")
	ac = plus.android.runtimeMainActivity();
	c2int = plus.android.invoke(color, "parseColor", "#000000")
	win = plus.android.invoke(ac, "getWindow");
	plus.android.invoke(win, "setNavigationBarColor", c2int)
	// #endif

底部区域颜色配置

底部区域颜色已配置成功(下图仅供参考,随便选的颜色,有点丑哈哈)

顶部电池栏的配置

配置顶部导航栏颜色

方案一:仅适用于原生导航配置,非自定义导航

在page.json修改需要配置的页面的navigationBarTextStyle属性

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				// "navigationStyle": "custom"
				"navigationBarTitleText": "我是原生title",
				"navigationBarTextStyle": "white" ,// 仅支持 black/white
				"navigationBarBackgroundColor": "#aaaaff"
			}
		}
	],

方案一:通用,也适用于自定义导航

在页面中使用nativejs的api,native是uni内置的sdk,不需要手动引入,直接用就可以,但是需要注意调用时机和条件使用,参考下面的注意事项哦

onReady(){
	    plus.navigator.setStatusBarStyle("dark"); //只支持dark和light
	}

注意事项

注意函数的调用时机,如果是自定义导航栏,方法只写在onReady的话,切换路由再回来以后,你的配置会失效,所以要注意调用时机

uniapp中 onReady, onLoad, onShow区别

  • onReady 页面初次渲染完成了,但是渲染完成了,你才发送请求获取数据,显得有些慢
  • onLoad 只加载一次,监听页面加载,其参数为上个页面传递的数据,参数类型为Object
  • onShow 监听页面显示。页面每次出现都触发,包括从下级页面点返回露出当前页面

举个栗子

目前我是这样配置(举个栗子:配置顶部导航栏背景颜色为黑色)

import { onLoad, onShow, onReady} from '@dcloudio/uni-app';
onReady(() => { 
/* #ifdef APP-PLUS */ 
plus.navigator.setStatusBarStyle('dark'); 
/* #endif */
});
onShow(() => { 
/* #ifdef APP-PLUS */ 
plus.navigator.setStatusBarStyle('dark'); 
/* #endif */
});

以上就是uniapp改变底部安全区顶部手机信号时间电池栏颜色样式的详细内容,更多关于uniapp改变底部顶部颜色样式的资料请关注脚本之家其它相关文章!

相关文章

  • layer弹出层中H5播放器全屏出错的解决方法

    layer弹出层中H5播放器全屏出错的解决方法

    本文主要介绍了layer弹出层中H5播放器全屏出错解决&属性poster底图占满video的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS猜数字游戏实例讲解

    JS猜数字游戏实例讲解

    这篇文章主要为大家详细介绍了JS猜数字游戏实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 手机端页面rem宽度自适应脚本

    手机端页面rem宽度自适应脚本

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。重点给大家介绍下rem.有需要的小伙伴可以参考下。
    2015-05-05
  • JS实现仿京东淘宝竖排二级导航

    JS实现仿京东淘宝竖排二级导航

    本文给大家分享一段使用原生Javascript实现的仿京东淘宝竖排二级导航的代码,非常的实用,有需要的小伙伴参考下
    2014-12-12
  • 微信小程序开发实战教程之手势解锁

    微信小程序开发实战教程之手势解锁

    这篇文章主要介绍了微信小程序开发实战教程之手势解锁的相关资料,本文分步骤给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 微信浏览器内置JavaScript对象WeixinJSBridge使用实例

    微信浏览器内置JavaScript对象WeixinJSBridge使用实例

    这篇文章主要介绍了微信浏览器内置JavaScript对象WeixinJSBridge使用实例,本文给出了分享到朋友圈、发送给好友、分享到腾讯微博、关注指定的微信号等功能代码,需要的朋友可以参考下
    2015-05-05
  • 浅谈JavaScript正则表达式-非捕获性分组

    浅谈JavaScript正则表达式-非捕获性分组

    下面小编就为大家带来一篇JavaScript正则表达式-非捕获性分组。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 如何选择适合你的JavaScript框架

    如何选择适合你的JavaScript框架

    这篇文章主要介绍了如何选择适合你的JavaScript框架,如何选择一个高效的JS框架经验之谈。
    2017-11-11
  • 理解javascript中的MVC模式

    理解javascript中的MVC模式

    这篇文章主要为大家介绍了javascript中的MVC模式,MVC是一种软件架构模式,一般把软件模式分为三部分,本文就针对MVC模式的三部分进行讲解,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • CocosCreator入门教程之网络通信

    CocosCreator入门教程之网络通信

    这篇文章主要介绍了CocosCreator的网络通信,内容不多,涉及到的细节,读者可以根据实际情况,自己去延申
    2021-04-04

最新评论