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

àì夳堔傛蜴生んèń 2022-06-01 01:23 186阅读 0赞

最近在使用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;  // 获取手机类型，比如： ios
      var 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的方法即可实现效果

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app沉浸式透明导航栏

第一步：`pages.json`，配置以下代码： { "pages": [ { "path": "pages/index/in

Bertha 。/ 2023年01月15日 08:07/ 0 赞/ 1535 阅读

相关 android 沉浸式状态栏兼容低版本,Android 沉浸式状态栏适配方案

首先说下什么是沉浸式状态栏：这是android4.4以后开始支持的一种效果，状态栏不再是一个黑条，而是置为透明或者半透明，然后页面延伸到状态栏下面，这样状态栏区域也可以成为ap

╰半夏微凉°/ 2022年10月17日 11:07/ 0 赞/ 324 阅读

相关 android 导航栏半透明,Android 沉浸式/透明式状态栏、导航栏

前言 Android 从4.4开始引进透明状态栏和导航栏的概念，并且在5.0进行了改进，将透明变成了半透明的效果。虽然此特性最早出现在ios，但不否认效果还是很赞的。至于

曾经终败给现在/ 2022年10月16日 07:38/ 0 赞/ 324 阅读

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

最近在使用apicloud开发一款APP，项目没有使用安卓和ios开发人员，选择APICLOUD开发，犹豫UI设计的导航栏是沉浸式，在Android和ios上的效果是不一样的，

àì夳堔傛蜴生んèń/ 2022年06月01日 01:23/ 0 赞/ 187 阅读

相关 Android 沉浸式状态栏与隐藏导航栏

1 前言一般我们在Android的APP开发中，APP的界面如下： ![这里写图片描述][SouthEast] 可以看到，有状态栏、ActionBar(Tool

落日映苍穹つ/ 2022年05月20日 01:41/ 0 赞/ 428 阅读

相关 Android 沉浸式状态栏与隐藏导航栏

1 前言一般我们在Android的APP开发中，APP的界面如下： ![这里写图片描述][SouthEast] 可以看到，有状态栏、ActionBar(Tool

﹏ヽ暗。殇╰゛Y/ 2022年05月12日 20:50/ 0 赞/ 398 阅读

相关 Android实现沉浸式通知栏通知栏背景颜色跟随app导航栏背景颜色而改变

最近好多app都已经满足了沉浸式通知栏，所谓沉浸式通知栏：就是把用来导航的各种界面操作空间隐藏在以程序内容为主的情景中，通过相对“隐形”的界面来达到把用户可视范围最大化地用到

「爱情、让人受尽委屈。」/ 2022年04月16日 02:38/ 0 赞/ 737 阅读

相关 APICloud 使用NVTabBar做导航栏

背景： 1、APICloud开发app 2、在index.html里面编辑，把原本的代码去掉 3、只留<link rel="stylesheet" type="te

心已赠人/ 2022年03月09日 13:16/ 0 赞/ 285 阅读

相关 APICloud如何实现顶部导航栏切换功能

第一步、后台添加模板NVVavigationBar ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

以你之姓@/ 2022年03月07日 10:28/ 0 赞/ 384 阅读

相关 APICloud学习笔记之沉浸式效果

.config.xml中 <preference name="statusBarAppearance" value="true"/> <?xml ve...

你的名字/ 2021年01月09日 09:27/ 0 赞/ 574 阅读