h5混合開發沉浸式導航源碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<style type="text/css">
.mui-bar-transparent{
background: rgba(94,5,45,0);
}
.mui-bar-transparent a,.mui-bar-transparent h1{
color: #fff;
}
.mui-slider-item img{
height: 280px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-transparent" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">aa</h1>
</header>
<div class="mui-content">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--支持循環，需要重複圖片節點 0 1 2 3 0 1 2 3-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/1.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/2.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/3.png" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="img/4.png" /></a></div>
<!--支持循環，需要重複圖片節點-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/1.png" /></a></div>
</div>
<!--//輪播圖中間底部圓點-->
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div style="height: 1000px;">
</div>
</div>
<script type="text/javascript" src="js/castapp.js" ></script>
<script type="text/javascript">
ca.init();
castapp.pictureScroll({
callback:function(pictureNumber){
console.log(pictureNumber);
},
isAutoScroll:true,
scrollTime:3
});
mui.init();
mui.plusReady(function(){
// 創建加載內容窗口
var topoffset='45px';
var header=document.getElementById("header");
if(plus.navigator.isImmersedStatusbar()){// 兼容immersed狀態欄模式
// 獲取狀態欄高度並根據業務需求處理，這裡重新計算了子窗口的偏移位置
topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45);
header.style.height=topoffset+'px';
header.style.paddingTop=(topoffset-45)+'px';
}
});
</script>
</body>
</html>
相關推薦
