摘要:本篇教程探讨了WEBAPP开发教程之添加引导页,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇教程探讨了WEBAPP开发教程之添加引导页,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
1.在client_index.html文件中添加如下代码:
<script type="text/javascript">
if(window.plus){
plusReady()
}else{
document.addEventListener('plusready',plusReady,false)
}
function plusReady(){//这里是每次进入应用都会显示引导页,开发中要如何显示引导页视具体的情况而定。
var guide = plus.webview.create('guide.html',"guide");
guide.show();
}
</script>
2.创建image文件夹,添加引导图的图;创建css文件夹,引入mui.min.css、mui.css;创建js文件夹,引入mui.js文件、mui.min.js文件等。
3.添加引导页面 guide.html,代码如下:
<!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" />
<style type="text/css">
body {
background-color: black;
}
.guide-img {
width: 100%;
}
#start {
position: absolute;
bottom: 40px;
width: 60%;
left: 20%;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/yuantiao.jpg">
<button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">开始体验</button>
</a>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
/**
* 获取系统状态栏高度
* //www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
*/
var sh = plus.navigator.getStatusbarHeight();
/**
* 获取设备屏幕高度分辨率以及宽度分辨率
* //www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight
* //www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth
*/
var h = plus.screen.resolutionHeight;
var w = plus.screen.resolutionWidth;
/**
* 设置图片高度,这里图片并不规范;
* 实际开发中,建议大家制作iphone6plus规格的图片;
*/
var imgs = document.querySelectorAll(".guide-img");
for(var i = 0, len = imgs.length; i < len; i++) {
imgs[i].style.height = (h - sh) + "px";
imgs[i].style.width = w + "px";
}
/**
* 手动关闭启动页
* //www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen
*/
plus.navigator.closeSplashscreen();
document.getElementById("start").addEventListener("tap", function() {
/**
* 向本地存储中设置launchFlag的值,即启动标识;
* //www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
*/
plus.storage.setItem("launchFlag", "true");
mui.openWindow({
url: "main.html",
id: "main",
extras: {
mark: "gudie" //同样,这里也只是个标识,实际开发中并不用;
}
});
});
});
/**
* 重写mui.back(),什么都不执行,反之用户返回到入口页;
*/
mui.back = function() {};
</script>
</body>
</html>
注意:要将guide.html中的mui.openWindow的url替换成你的首页地址,可以是根目录下的地址,也可以是网络地址(//或https://开头),如:
mui.openWindow({
url: "", //mian.html 或者如 https://www.baidu.com/
id: "main",
extras: {
mark: "gudie" //同样,这里也只是个标识,实际开发中并不用;
}
});
以上执行完毕之后,便可在真机上运行,查看引导图页面效果。
这里是每次进入应用都会显示引导页,开发中要如何显示引导页视具体的情况而定。
如需要只在首次出现引导图:
在client_index.html文件中:
var launchFlag = plus.storage.getItem("launchFlag");
if(launchFlag == true) {
//非首次
} else if(!launchFlag){
//首次
var guide = plus.webview.create('guide.html',"guide");
guide.show();
}
并在guide.html中添加 launchFlag的标签设置,向本地存储中设置launchFlag的值,即启动标识;在每次引导图点击立即使用是将标签设置为true:
plus.storage.setItem("launchFlag", "true");
以上,即可实现引导图的效果。
那么,怎么在引导图中添加分页器,写分页器主要是能监听滑动的事件,只要能监听到滑动事件,那么在滑动时添加分页器的高亮即可。
查阅资料知道,当拖动切换显示内容时,会触发slide事件,通过该事件的detail.slideNumber参数可以获得当前显示项的索引,于是监听slide事件:
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的;
alert(event.detail.slideNumber);
});
然后写一个分页器:
<div class="guide-pages">
<ul>
<li class="li-guide active" id="li-guide0"></li>
<li class="li-guide" id="li-guide1"></li>
<li class="li-guide" id="li-guide2"></li>
<li class="li-guide" id="li-guide3"></li>
</ul>
</div>
css:
.guide-pages{
position: absolute;
left: 50%;
bottom: 17px;
width: 120px;
margin-left: -80px;
text-align: center;
}
.li-guide{
display:block;
float: left;
width:10px;
height: 10px;
background-color: #000;
margin-left: 5px;
margin-right: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.3;
}
.li-guide.active{
opacity: 1;
background-color: #3478f6;
}
js:
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的;
document.querySelector(".active").classList.remove("active");
var this_id = "li-guide" + event.detail.slideNumber;
document.getElementById(this_id).classList.add("active");
});
以上,即可实现分页器。
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号