当前位置: 首页 > news >正文

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元素的调整。

转载于:https://www.cnblogs.com/Tohold/p/10141652.html

相关文章:

  • PostgreSQL学习手册(索引)
  • READ_TEXT 如何获取key值
  • windows 2008 r2 ftp 问题
  • POJ2456(最大化最小值)解题报告
  • SVN常用命令
  • Python学习之==生成器
  • MQTT学习笔记——MQTT协议体验 Mosquitto安装和使用
  • 遇到的Cocos2dx问题
  • Hello world开始复习
  • [ffmpeg] 定制滤波器
  • IOS的处理touch事件处理(按照手指的移动移动一个圆,开发环境用的ios7,storyboard)...
  • DataTable转实体类
  • [Java][Android][Process] ProcessBuilder与Runtime差别
  • NET Core微服务之路:自己动手实现Rpc服务框架,基于DotEasy.Rpc服务框架的介绍和集成...
  • 服务器虚拟化的十大谎言
  • JavaScript-如何实现克隆(clone)函数
  • $translatePartialLoader加载失败及解决方式
  • 【mysql】环境安装、服务启动、密码设置
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • Java,console输出实时的转向GUI textbox
  • JWT究竟是什么呢?
  • Laravel5.4 Queues队列学习
  • Linux快速复制或删除大量小文件
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • nfs客户端进程变D,延伸linux的lock
  • Python连接Oracle
  • 从setTimeout-setInterval看JS线程
  • 悄悄地说一个bug
  • 如何学习JavaEE,项目又该如何做?
  • 使用Tinker来调试Laravel应用程序的数据以及使用Tinker一些总结
  • 微信小程序填坑清单
  • 一个6年java程序员的工作感悟,写给还在迷茫的你
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • PostgreSQL之连接数修改
  • # 飞书APP集成平台-数字化落地
  • #快捷键# 大学四年我常用的软件快捷键大全,教你成为电脑高手!!
  • (07)Hive——窗口函数详解
  • (c语言版)滑动窗口 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度
  • (HAL库版)freeRTOS移植STMF103
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (机器学习-深度学习快速入门)第一章第一节:Python环境和数据分析
  • (六)激光线扫描-三维重建
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • .gitignore文件_Git:.gitignore
  • .net core开源商城系统源码,支持可视化布局小程序
  • .NET Framework 服务实现监控可观测性最佳实践
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题
  • /var/log/cvslog 太大
  • @Autowired多个相同类型bean装配问题
  • @entity 不限字节长度的类型_一文读懂Redis常见对象类型的底层数据结构
  • @RequestBody与@ModelAttribute
  • @RequestMapping用法详解
  • [3D游戏开发实践] Cocos Cyberpunk 源码解读-高中低端机性能适配策略