APICLOUD实现沉浸式导航栏在Android和ios上的兼容

最近在使用apicloud开发一款APP，项目没有使用安卓和ios开发人员，选择APICLOUD开发，犹豫UI设计的导航栏是沉浸式，在Android和ios上的效果是不一样的，ios上导航栏会浮在内容上面，将内容部分遮挡，如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOxizIFk-1604049698276)(https://community.apicloud.com/bbs/data/attachment/forum/201603/29/164049jtfoqudq8mcmufqy.jpg)]

我要达到的是不希望导航栏遮挡住内容部分，经过不懈的努力和各种尝试，终于解决了这个问题，具体步骤如下：
1、在config文件里面配置

  <preference name="statusBarAppearance" value="true"/>

2、通过判断手机类型给header添加padding-top

var systemType = api.systemType;  // 获取手机类型，比如： iosvar header = document.querySelector('#header');if(systemType=='ios'){//兼容ios和安卓$api.addCls(header, 'headerIos');}else{$api.addCls(header, 'headerAnd');}api.setStatusBarStyle({color: '#0063ff',//设置APP状态栏背景色style: 'light'});

css代码：（由于Android和ios的状态栏高度不同）

//其中，IOS状态栏高度为20px，Android为25px
/*兼容ios和Android*/
.headerIos{padding-top: 20px;
}
.headerAnd{padding-top: -25px;
}

在对应页面执行步骤2的方法即可实现效果

APICLOUD实现沉浸式导航栏在Android和ios上的兼容相关推荐

android 4.4 以上沉浸式状态栏和沉浸式导航栏管理，一句代码轻松实现
ImmersionBar 项目地址:gyf-dev/ImmersionBar 简介:android 4.4 以上沉浸式状态栏和沉浸式导航栏管理,一句代码轻松实现,以及对 bar 的其他设置,详见 R ...
Android使用沉浸式导航栏
Android开发中,往往会有一种需求,那就是沉浸式导航栏(什么是沉浸式导航栏,这里就不做展开,自行百度).那么,怎么做到沉浸式状态栏呢,咱们接着往下看... 首先,在activity中加入 @Ove ...
android沉浸式导航栏与键盘的冲突
最近项目搞了沉浸式导航栏,但是与软键盘弹出冲突,布局不往上面顶,折腾几番之后,网上找到个方法但是不兼容华为部分机型,于是做了修改,测试机型有限,我手头的机型是没有问题了,于是分享出来,直接用就行了. ...
微信小程序——沉浸式导航栏实现（含iphoneX适配和组件封装）
文章目录前言正文 JSON navBar.js navBar.wxml navBar.wxss test1.wxml 展示效果总结前言微信小程序中导航栏一般来说是默认的展示标题等等,可以做的 ...
uniapp设置导航栏、沉浸式导航栏以及获取屏幕尺寸
页面上往往会有一些需要随着屏幕的大小变化而变化的样式,这时,我们就需要获取到屏幕的宽度和高度. 当然,一个H5页面或者微信小程序页面的导航栏会有多种形态,可以带有导航栏,也可以设置为沉浸式导航栏(即导 ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
微信小程序——沉浸式导航栏实现
微信小程序--沉浸式导航栏实现微信小程序中导航栏一般来说是默认的展示标题等等,可以做的样式改变仅仅能通过配置一些官方提供的属性来实现.除此之外小程序还提供了navigationStyle这个属性可以 ...
android 沉浸式导航栏
<StatusBaranimated={true} //指定状态栏的变化是否应以动画形式呈现.目前支持这几种样式:backgroundColor, barStyle和hiddenhidden={ ...
沉浸式导航栏html,混合开发 h5+ 沉浸式的适配
1.需要在mainfest.json plus对象里添加 "statusbar": { "immersed": "true", " ...

APICLOUD实现沉浸式导航栏在Android和ios上的兼容

APICLOUD实现沉浸式导航栏在Android和ios上的兼容相关推荐

最新文章

热门文章