有你在真好 的个人博客
h5混合开发沉浸式导航源码
阅读:2260 添加日期:2021/3/27 23:25:27 原文链接:https://www.toutiao.com/item/6429888623247622657/

<!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>h5混合开发沉浸式导航源码

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号