APICloud学习笔记之沉浸式效果

你的名字 2021-01-09 09:27 511阅读 0赞

1.config.xml中

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

<?xml version="1.0" encoding="UTF-8"?>
    
    <widget id="A6948716678388" version="0.0.1"> 
      <name>dibudaohang</name>  
      <description>Example For APICloud.</description>  
      <author email="developer@apicloud.com" href="http://www.apicloud.com">Developer</author>  
      <content src="index.html"/>  
      <preference name="appBackground" value="rgba(0,0,0,0)"/>  
      <preference name="windowBackground" value="rgba(0,0,0,0)"/>  
      <preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/>  
      <preference name="autoLaunch" value="true"/>  
      <preference name="autoUpdate" value="true"/>  
      <preference name="smartUpdate" value="false"/>  
      <preference name="debug" value="false"/>  
     <preference name="statusBarAppearance" value="true"/>  
      <permission name="location"/>  
      <permission name="internet"/>  
      <access origin="*"/> 
    </widget>

2.页面中设置header

<body>
        <div id="header-content">
           <header id="header"> <div class="order">订单</div> </header>
            <nav id="nav">
                <div tapmode name="nav-item" class="nav-item active" οnclick="randomSwitchBtn( this );">
                    <div class="nav-item-text ">全部订单</div>
                    <div class="nav-item-bar bar-active"></div>
                </div>
                <div tapmode name="nav-item" class="nav-item" οnclick="randomSwitchBtn( this );">
                    <div class="nav-item-text">待评价</div>
                    <div class="nav-item-bar"></div>
                </div>
                
            </nav>
            
        </div>
        
    </body>

3.在api.ready中

<script type="text/javascript">
        apiready = function () {
            var header = document.querySelector('#header'); $api.fixStatusBar(header);  
        }
    .
    .
    .
    </script >

发表评论取消回复

表情：

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

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

相关阅读

相关沉浸式状态栏

实现效果 ![默认为透明导航栏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

叁歲伎倆/ 2023年01月24日 02:28/ 0 赞/ 157 阅读

相关安卓笔记——沉浸式状态栏

目录标题去掉标题栏效果步骤图片的沉浸式效果步骤去掉标题栏 ![在这里插入图片描述][watermark_type_ZmF

今天药忘吃喽~/ 2022年10月15日 07:57/ 0 赞/ 195 阅读

相关沉浸式设计android,android 沉浸式设计方案总结

沉浸式设计已经应用到几乎所有的app，但是各种百度出来的资料都是不全面的，无奈之下只好自己从头总结一番，包括的内容有： \- 4.4以及5.0以上各种情况解决方案 \- 设

末蓝、/ 2022年10月05日 10:53/ 0 赞/ 148 阅读

相关沉浸式状态栏

TextView textView; ViewGroup view; @Override protected void

雨点打透心脏的1/2处/ 2022年06月15日 09:26/ 0 赞/ 224 阅读

相关沉浸式状态栏效果的简单实现

一：设置AndroidManifest.xml 的AppTheme 的Parenet为NoActionBar (windows用户在文件选中AppTheme 然后ctrl

清疚/ 2022年06月15日 07:56/ 0 赞/ 156 阅读

相关 Android——沉浸式

Android官方从来没有给出过沉浸式状态栏这样的命名，只有沉浸式模式（Immersive Mode）这种说法。而有些人在没有完全了解清楚沉浸模式到底是什么东西的情况下，就张冠

喜欢ヅ旅行/ 2022年06月03日 01:39/ 0 赞/ 124 阅读

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

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

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

相关 AppbarLayout----沉浸式（收藏学习）

在许多App中看到, toolbar有收缩和扩展的效果, 例如: ![Image 1][] appbar.gif 要实现这样的效果, 需要用到: Coordin

我不是女神ヾ/ 2022年04月11日 01:43/ 0 赞/ 239 阅读

相关 apicloud api.safeArea（解决状态栏沉浸式、刘海屏、iPhoneX 底部Home键）

> api.safeArea，页面不被其它内容（如状态栏）遮住的区域 > > 通过safeArea能够知道当前页面哪些地方被遮住，从而做出相应的调整，保证页面重要元素不被遮挡

今天药忘吃喽~/ 2021年12月10日 02:21/ 0 赞/ 372 阅读

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

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

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