APICloud学习笔记之沉浸式效果

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" onclick="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" onclick="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 >

 

posted @ 2017-05-15 10:44  喜爱糖葫芦  阅读(3975)  评论(0)  编辑  收藏  举报