Mui 沉浸模式以及状态栏颜色改变
手机的顶部状态栏,也就是信号、电量那条,有4种状态,分别是正常、变色、透明(也称沉浸式状态栏)、消失(也就是全屏)。
后3种特殊用法,具体见下:
这些都是真机运行不生效,需提交App云端打包后才生效;
状态栏变色
常见的就是把状态栏设置为tilte的颜色,这样看着大气;
写法:
使用5+API plus.navigator.setStatusBarBackground)。
首页配置
首页需要在manifest.json文件中,plus->launchwebview下添加statusbar节点,并配置background的值(格式为#RRGGBB)。
若首页为secondwebview,则调整launchwebview为secondwebview即可。
终端支持:
- Android5及以上系统支持;
- iOS7.0及以上系统支持。
高度处理:此时webview高度没有全屏,webview高度+状态栏高度=手机屏幕高度。
也就是转场动画时,webview动画是不会通顶的,状态栏不会在转场时变化。
状态栏透明(沉浸式)
常见使用场景:如果页面顶部是图片,一般会把状态栏变成透明,此时同时会处理成滚动后恢复为纯色title,
写法:
HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:
打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true。
如果不生效,在distribute节点下的apple和goole两个节点下添加:
"UIReserveStatusbarOffset": true,(apple节点下添加)
"ImmersedStatusbar": true,/*设置为沉浸栏模式*/(goole节点下添加)
终端支持:
- Android4.4及以上系统支持;
- iOS7.0及以上系统支持。
前景色处理:
与背景色调整相同,如果背景图颜色不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
前景色的使用限制更多些,只能设置黑或白,通过plus.navigator.setStatusBarStyle('dark');设前景为黑色,'dark'换成light则前景色变为白色。
同时前景色处理在终端支持方面:
- Android5只有小米和魅族支持,Android6及以上所有安卓支持;
- iOS7及以上支持
高度处理:
注意,此时webview高度为全屏,状态栏高度为0,也就是webview高度=屏幕高度。
状态栏背景透明后前景图标覆盖在webview顶部。
尤其注意此时dom里涉及fix定位计算的元素,可能需要重新排高度。
在状态栏透明的情况下,转场动画时,webview动画是会通顶的,状态栏那里也会有条线左右移动。
其他注意:
沉浸式状态栏不支持动态调整,属于应用级,真机运行不生效,需要提交到云端打包后有效。
一个app设置了沉浸式,就意味着里面的每个webview都变成沉浸式。
这可能会造成很多页面都需要调整高度,此时有一种方案,就是在webview创建时,允许通过一个参数设置把这个webview的状态条再模拟显示出来,plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {statusbar:{background:"#D4D4D4"}})。这样设置后,webview的高度重新回到状态栏下方,不再顶到屏幕顶部。
此api从HBuilder8.1 alpha版起生效。
全屏显示 (没有状态栏)
常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏。webview高度全屏了,状态栏没有了。
写法:
设置应用全屏显示
如果想要全屏模式,在应用的manifest.json文件中添加“fullscreen”节点:
Boolea值类型,true表示全屏,false表示非全屏,默认值为false。
App云端打包支持全屏操作方式:
双击应用的manifest.json文件,切换到“代码视图”,在根节点下添加fullscreen节点:**
Ctrl+S保存,并提交App云端打包
在应用中可调用5+ API动态改变应用是否全屏显示的状态
function fullscreen(){
// 设置应用全屏显示!
plus.navigator.setFullscreen(true);
}
function unfullscreen(){
// 设置应用非全屏显示!
plus.navigator.setFullscreen(false);
}
function isfullscreen(){
// 查询应用当前是否全屏显示!
console.log( "是否全屏:"+(plus.navigator.isFullscreen()?"是":"否") );
}
终端支持:
没有终端类型限制
高度处理:与状态栏透明相同,webview高度=屏幕高度,状态栏高度为0且不显示前景内容。需要注意dom里fix元素的调整。
Mui 沉浸模式以及状态栏颜色改变的更多相关文章
- Mui沉浸模式以及状态栏颜色改变
沉浸模式只需要设置下就可以 ios: 打开应用的manifest.json文件,切换到代码视图,在plus -> distribute -> apple 下添加UIReserveSta ...
- Flutter修改状态栏颜色以及字体颜色
Flutter沉浸式状态栏 void main() { runApp(MyApp()); if (Platform.isAndroid) { // 以下两行 设置android状态栏为透明的沉浸.写在 ...
- Android Immersive Mode (沉浸模式) 还是 Translucent Bars (透明状态栏)
Immersive Mode (沉浸模式) 还是 Translucent Bars (透明状态栏) [科普]什么叫真正的“沉浸式”状态栏? 为什么在国内会有很多用户把「透明栏」(Translucent ...
- VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示
VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示: “事件”引起变量值的变化,系统引擎自动根据变量值的变化刷新页面 在VUE Nod ...
- Android修改状态栏颜色全方位教程
关键字:状态栏着色 透明状态栏 沉浸式 白底黑字 Github Demo:https://github.com/imflyn/Eyes 参考文章: Android-transulcent-status ...
- [Android] 关于系统工具栏和全屏沉浸模式
随着应用程序的一些深入设计,大家总想要更好的界面和体验,所以有些东西并不能只是知道方法就结束了,是得要去深入研究研究的.通过这个过程我觉得,从应用层面来讲,想实现一个功能很简单,但若想实现的好,就要去 ...
- Android开发技巧——设置系统状态栏颜色
开门见山,先来三张效果图: 然后我们再来讲如何实现以及如何快速地实现. 如何实现 实现设置系统状态栏颜色需要至少在Android 4.4.2(API 19)以上.这是因为,在这个版本以下,没有任何的A ...
- Android QMUI实战:沉浸式/适配状态栏
近期研究QMUI换肤的实现,顺便分析了下QMUI的沉浸式. 网上已有很多关于QMUI实现页面沉浸式的文章,简而言之:复杂了. 本期,我们仅通过几行代码,即可完美实现页面沉浸式效果,并轻松匹配换肤的色彩 ...
- Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
随机推荐
- 爬虫(十四):scrapy下载中间件
下载器中间件是介于Scrapy的request/response处理的钩子框架,是用于全局修改Scrapy request和response的一个轻量.底层的系统. 激活Downloader Midd ...
- ST表(模板)「 查询区间最值 」
The Water Problem HDU - 5443 「 第一部分nlogn预处理 第二部分O(1)询问 」 #include <iostream> #include <bi ...
- P1026 统计单词个数——substr
P1026 统计单词个数 string 基本操作: substr(x,y) x是起始位置,y是长度: 返回的是这一段字符串: 先预处理sum[i][j],表示以i开头,最多的单词数: 从后往前寻找,保 ...
- Python中匹配IP的正则表达式
下面是IPv4的IP正则匹配表达式 import re #简单的匹配给定的字符串是否是ip地址,下面的例子它不是IPv4的地址,但是它满足正则表达式 if re.match(r"^(?:[0 ...
- [端口安全]Hydra密码爆破
目录 0x01 简介 0x02 常见参数 0x03 使用案例 0x04 密码字典 0x01 简介 Hydra中文名:九头蛇,这是一款相当强大的爆破工具,它基本支持了所有可爆破协议,而且容容错率非常好 ...
- 【Linux性能调优一】观大局:系统平均负载load average
要测试linux系统性能及调优,首先要从全局检查linux的平均负载 1.什么是平均负载 load average 系统平均负载,平均负载是指单位时间内,系统处于可运行状态和不可中断状态的平均进程数, ...
- Go 语言入门(二)方法和接口
写在前面 在学习 Go 语言之前,我自己是有一定的 Java 和 C++ 基础的,这篇文章主要是基于A tour of Go编写的,主要是希望记录一下自己的学习历程,加深自己的理解 Go 语言入门(二 ...
- 使用Qt Creator作为Linux IDE,代替Vim:实现两台Linux电脑远程部署和gdb调试(一台电脑有桌面系统,一台电脑无桌面系统)
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/libaineu2004/article/details/62423830 尊重作者,支持原创,如 ...
- arcgis python 布局中所有元素信息报告
# Author: ESRI # Date: July 5, 2010 # Version: ArcGIS 10.0 # Purpose: This script generates a report ...
- TP框架修改后台路径方法
直接映射 admin 后台修改路径为 myadmin888 文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎留言.评论