mui 引导页
引导页制作
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="../css/mui.min.css" rel="stylesheet" />
<style>
html,
body {
height: %;
}
body {
margin: ;
}
.mui-content {
height: %;
padding: ;
}
.mui-slider {
height: %;
}
.mui-slider-group {
height: %;
}
.mui-slider-item {
height: %;
width: %;
margin-left: 0px;
margin-right: 0px;
border: none;
}
a {
height: %;
}
#into {
bottom: %;
position: absolute;
width: %;
height: 35px;
text-align: center;
left: %;
padding: ;
border: ;
background: transparent;
z-index: ;
}
.img_content {
position: relative;
width: %;
height: %;
}
.img_content img:first-child {
position: absolute;
top: %;
}
.img_content img:nth-child() {
position: absolute;
top: %;
}
.img_content img:last-child {
position: absolute;
bottom: %;
}
</style>
</head> <body>
<div class="mui-content" style="height: 100%;overflow: hidden;padding: 0px;margin: 0px;background-color: #5dcbe2;">
<div id="slider" class="mui-slider">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item" style="background-color: #5dcbe2;">
<div class="img_content">
<img src="../images/welcome/text1.png" />
<img src="../images/welcome/1.png">
</div> </div> <!-- 第二张 -->
<div class="mui-slider-item" style="background-color: #68d8b0;">
<div class="img_content">
<img src="../images/welcome/text2.png" />
<img src="../images/welcome/2.png">
</div>
</div>
<!-- 第三张--> <div class="mui-slider-item" style="background-color: #c1392b;">
<div class="img_content">
<img src="../images/welcome/text3.png" />
<img src="../images/welcome/3.png">
<button id="into"></button>
<img src="../images/welcome/btnin.png"> </div> </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>
</div> </div>
</div>
</body>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
mui.os.ios&&plus.navigator.setFullscreen(true);
var slider = mui('.mui-slider').slider();
initPageguid();
setStatusBarBackgroud();
plus.navigator.closeSplashscreen();
mui("#into")[].addEventListener('tap', function() {
mui.fire(plus.webview.getLaunchWebview(), 'run');
//plus.webview.currentWebview().close();//等登录注册等页面显示之后再关闭
}); function initPageguid(){
//绑定滑屏相关事件
var gallery = mui('.mui-slider')[];
gallery.addEventListener('swiperight', function(e) {
//向左划动
var num = mui('.mui-slider').slider().getSlideNumber() - ;
setContainerBackg(num);
});
gallery.addEventListener('swipeleft', function(e) {
//向右划动
var num = mui('.mui-slider').slider().getSlideNumber() + ;
setContainerBackg(num);
});
} function setStatusBarBackgroud () {
if (mui.os.ios) {
plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
//提前设置登陆页背景颜色
plus.navigator.setStatusBarBackground("#3A75B8");
}
};
function setContainerBackg(num) {
//提前设置背景色
if (num == ) {
mui('.mui-content')[].style.backgroundColor = '#5dcbe2';
} else if (num == ) {
mui('.mui-content')[].style.backgroundColor = '#c1392b';
}
};
})
</script> </html>
mui 引导页的更多相关文章
- MUI - 引导页制作
引导页制作 本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guid ...
- HBuilder mui引导页制作
http://www.bcty365.com/content-146-2582-1.html
- wap2app（三）-- 添加引导页
1.在client_index.html文件中添加如下代码: <script type="text/javascript"> if(window.plus){ plus ...
- app添加引导页
1.设置guide.html 2.登陆或者主页面引用guide.html mui.plusReady(function() { //读取本地存储,检查是否为首次启动 决定是否显示引导页 var sho ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- iOS App引导页功能实现
一.写作原因 以前都没有想着来写点东西,今天遇到件事情让我决定每次还是要做记录.因为以前自己可以轻松的完成pod spec的配置,但是今天在做的时候还是忘了遇到了很多坑.pod spec配置遇到的坑不 ...
- 安卓第一次启动引导页使用ViewPager实现
我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)
距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ①)
好长时间没更新博客, 是时候来一波干货分享了;APP引导页话不多说每一个APP都会用到,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...
随机推荐
- rhel 6 version `GLIBC_2.14' not found (required by /usr/lib64/libstdc++.so.6)以及libstdc++.so.6: version GLIBCXX_3.4.18 not found解决办法
最近在oracle linux 7.3下开发了个应用,发布到rhel 6.5运行的时候,报version `GLIBC_2.14' not found (required by /usr/lib64/ ...
- docker 实践
https://doc.yonyoucloud.com/doc/docker_practice/etcd/etcdctl.html 启动http restful API docker批量映射端口 怎么 ...
- 一条命令，根据进程名判断有进程输出up，无进程无输出
这个研究了好一会, 由于开发需要,提供的命令. shell命令,可以按照分号分割,也可以按照换行符分割.如果想一行写入多个命令,可以通过“';”分割. a=`ps -ef | grep nginx | ...
- metasploit(MSF)对windows的ms17-010漏洞利用
picture 配置exploit msf > use exploit/windows/smb/ms17_010_eternalblue msf exploit(windows/smb/ms17 ...
- phpstorm 一个窗口打开多个项目
参考:https://imshusheng.com/php/135.html 文件 -> 设置 -> 项目"XXX" -> Directories- > A ...
- Python常用库之Pilow
基本用法 静态方法 PIL.Image.open(fp, mode=’r’) 传入文件路径(str),返回一个image对象 PIL.Image.alpha_composite(im1, im2) 混 ...
- hihoCoder week6 01背包
01背包 题目链接 https://hihocoder.com/contest/hiho6/problem/1 #include <bits/stdc++.h> using namespa ...
- webpack用 babel将ES6转译ES5
webpack webpack.config.js配置文件 module.exports = { entry: './es6.js', // 入口文件路径 output: { filename: &q ...
- Mysql数据类型、约束、存储引擎
一.数据类型 整数类型 默认有符号的 设置为无符号 1.create table t2(age tinyint unsigned); 2.建表后用alter修改 tinyint[(m)] [unsig ...
- gitlab git
git网站是进不去的需要加权限才能进去!!!!!!!! 登录进去后 ssh-keygen -t rsa -C "gitlab用户名一般是邮箱" 一路设置好 Use the code ...