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 >