uni-app修改顶部状态栏颜色

水深无声 2023-06-15 07:16 7阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

在pages.json中写默认的状态栏配置，我是自定义的顶部栏，所以主要看更改状态栏的颜色即可

{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "首页",
    				"app-plus":{
    					"titleNView":false    //去掉当前页的顶部导航栏
    				},
    				"navigationBarBackgroundColor":"#FE5786",
    				"navigationBarTextStyle":"white"  //状态栏字体颜色
    			}
    		},

动态修改状态栏颜色，style可设置为dark和light ，字符串类型

void plus.navigator.setStatusBarStyle(style);
    
    void plus.navigator.setStatusBarStyle("dark"); //黑色
    
    void plus.navigator.setStatusBarStyle("light");//白色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2][]

H5+官网搜索  setStatusBarStyle  可查询具体参数

uni-app官网地址：[https://uniapp.dcloud.io/collocation/pages][https_uniapp.dcloud.io_collocation_pages]

H5+地址：[http://www.html5plus.org/doc/zh\_cn/navigator.html\#plus.navigator.setStatusBarStyle][http_www.html5plus.org_doc_zh_cn_navigator.html_plus.navigator.setStatusBarStyle]

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121103726955.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191121103807161.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191121104318905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70
[https_uniapp.dcloud.io_collocation_pages]: https://uniapp.dcloud.io/collocation/pages
[http_www.html5plus.org_doc_zh_cn_navigator.html_plus.navigator.setStatusBarStyle]: http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setStatusBarStyle
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210308154227667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70