MUI - DIV窗体切换
神坑记录：
1、js报错异常：没有找到"innerHeight"属性？
解决方案：暂时不知原因，通过对mui.view.js进行调试得知是跳转目标页没有 .mui-navbar-left 这个css类。所以加入到指定位置即可。详细看demo
2、背景颜色记得设置，如果没有设置层的背景颜色，默认是透明的会看到上一页作为背景就尴尬了
3、在问题1的基础上衍生，第一次成功，第二次会失败？
解决方案：在mui.viw.js大约244行中找到如下代码并且注释
if (this.previousNavbar) {
this.previousNavbar.classList.remove(CLASS_NAVBAR_LEFT);
this.previousNavbar.classList.add(CLASS_NAVBAR_CENTER);
}
4、头部navbar各种异常？
解决方案：头部的navbar不要使用header，使用div和mui-navbar-inner等css类搭配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./static/css/mui.min.css">
<!-- <script src="./static/js/zepto.min.js"></script> -->
<script src="./static/js/mui.min.js"></script>
<script src="./static/js/mui.view.js"></script>
</head>
<body>
<!--页面主结构开始-->
<div id="app" class="mui-views mui-fullscreen mui-control-content mui-active">
<div class="mui-view">
<div class="mui-navbar">
</div>
<div class="mui-pages">
</div>
</div>
</div>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="setting" class="mui-page">
<!--页面标题栏开始-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>
</button>
<h1 class="mui-center mui-title">设置</h1>
</div>
<!--页面标题栏结束-->
<!--页面主内容区开始-->
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right" href="#account">
<img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
<div class="mui-media-body">
Hello MUI
<p class='mui-ellipsis'>账号:hellomui</p>
</div>
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#account" class="mui-navigate-right">账号与安全</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#notifications" class="mui-navigate-right">新消息通知</a>
</li>
<li class="mui-table-view-cell">
<a href="#privacy" class="mui-navigate-right">隐私</a>
</li>
<li class="mui-table-view-cell">
<a href="#general" class="mui-navigate-right">通用</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V3.3.0</i></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell" style="text-align: center;">
<a>退出登录</a>
</li>
</ul>
</div>
</div>
</div>
<!--页面主内容区结束-->
</div>
<!--单页面结束-->
<div id="account" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class=" mui-navbar-left mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">账号与安全</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">头像
<span class="mui-pull-right head">
</span>
</a>
</li>
<li class="mui-table-view-cell">
<a>姓名<span class="mui-pull-right">Hbuilder</span></a>
</li>
<li class="mui-table-view-cell">
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--单页面结束-->
<div id="app2" class="mui-views mui-fullscreen mui-control-content ">
<div class="mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置
</button>
<h1 class="mui-center mui-title">app2</h1>
</div>
<div class="mui-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">头像
<span class="mui-pull-right head">
</span>
</a>
</li>
<li class="mui-table-view-cell">
<a>姓名<span class="mui-pull-right">Hbuilder</span></a>
</li>
<li class="mui-table-view-cell">
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#app">
<span class="mui-icon"><i class="icon iconfont"></i></span>
<span class="mui-tab-label">锻炼</span>
</a>
<a class="mui-tab-item" href="#app2">
<span class="mui-icon"><i class="icon iconfont"></i></span>
<span class="mui-tab-label">学习</span>
</a>
<a class="mui-tab-item" href="#app3">
<span class="mui-icon"><i class="icon iconfont"></i></span>
<span class="mui-tab-label">成就</span>
</a>
<a class="mui-tab-item" href="#app4">
<span class="mui-icon"><i class="icon iconfont"></i></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
</div>
</body>
</html>
<script>
//初始化单页view
var viewApi = mui('#app').view({
defaultPage: '#setting'
});
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
var view = viewApi.view;
(function($) {
//处理view的后退与webview后退
var oldBack = $.back;
$.back = function() {
if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};
//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
view.addEventListener('pageBeforeShow', function(e) {
// console.log(e.detail.page.id + ' beforeShow');
});
view.addEventListener('pageShow', function(e) {
// console.log(e.detail.page.id + ' show');
});
view.addEventListener('pageBeforeBack', function(e) {
// console.log(e.detail.page.id + ' beforeBack');
});
view.addEventListener('pageBack', function(e) {
// console.log(e.detail.page.id + ' back');
});
})(mui);
</script>
<style>
.mui-views,
.mui-view,
.mui-pages,
.mui-page,
.mui-page-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4;
}
.mui-pages {
top: 46px;
height: auto;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mui-navbar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
background-color: #f7f7f8;
}
.mui-navbar .mui-bar {
position: absolute;
background: transparent;
text-align: center;
}
.mui-android .mui-navbar-inner.mui-navbar-left {
opacity: 0;
}
.mui-ios .mui-navbar-left .mui-left,
.mui-ios .mui-navbar-left .mui-center,
.mui-ios .mui-navbar-left .mui-right {
opacity: 0;
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}
.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}
.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
.mui-page .mui-table-view:first-child {
margin-top: 15px;
}
.mui-page .mui-table-view:last-child {
margin-bottom: 30px;
}
.mui-table-view {
margin-top: 20px;
}
.head-img {
width: 40px;
height: 40px;
}
.mui-fullscreen {
position: fixed;
/*z-index: 20;*/
/*background-color: #000;*/
}
.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}
</style>
MUI - DIV窗体切换的更多相关文章
- mui 窗体切换
手机实现窗体切换 1.在5+环境下(即H5app) 先初始化: mui.init({ subpages:[{ url:"page1.html",//子页面HTML地址,支持本地地址 ...
- 很实用的HTML5+CSS3注册登录窗体切换效果
1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...
- jquery 当前链接激活传递参数|div的切换显示
一.链接激活时传递参数 $("a").click(function(){ var obj=$(this).attr("field"); //获取当前field ...
- div上下切换（新增、删除、上下div切换）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- c# winform中窗体切换后释放及防止重复生成
问题1:窗体切换后如何关闭,并释放资? c# winform中,2个窗体,form1和form2,互相切换的时候执行 this.Hide(); Form2 form2 = new Form2(); f ...
- MUI 窗体切换(setting设置)即窗口从右往左切换，返回从左往右切换。
1)引入mui.min.css 2)引入mui.min.js 引入mui.view.js 1.HTML: //这是页面的主体结构 <div id="app" class=& ...
- selenium2入门 定位 窗体切换等等 （二）
定位用的html素材有两个 demo.html <html> <head> <title>UI Automation Testing</title> & ...
- mui底部选项卡切换实现
MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转
- MUI 图标筛选切换（父页面传值子页面）
1 父页面: index.html <li class="tab_layout"> <a href="javascript:;" clas ...
随机推荐
- Android 图表绘制 achartengine 示例解析
一. AChartEngine 简介 1. 项目地址 AChartEngine 简介 : AChartEngine 是 Android 平台的图表开发库, 能绘制 折线图, 饼图, 气泡图, 柱状图, ...
- vim 标准环境的配置
最近刚刚从IDE转到了vim,很多习惯不一致,特地配置了一下vim环境.在网上找了大神的帖子,怕忘记了,特此纪念. 传送门 http://www.cnblogs.com/ma6174/arch ...
- @import与link
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...
- TCP Wrapper 特殊使用
更多,更好内容请参见: http://www.ibm.com/developerworks/cn/aix/library/au-tcpwrapper/ 一. 用处和用法 没有符合hosts.allow ...
- BZOJ3654 : 图样图森破
考虑枚举回文中心,然后向两边扩展,当匹配到当前串的边界的时候,枚举下一个串接上. 这个过程可以通过记忆化搜索来完成,设: $f[i][0]$表示对于$i$这个位置,$[i,串结尾]$等待匹配的最长回文 ...
- BZOJ2934 : [Poi1999]祭坛问题
对于每个祭坛,算出每条线段阻碍它的角度区间,然后排序求并看看是否有空位即可,时间复杂度$O(n^2\log n)$. 这题在Main上官方时限是0.2S,因此需要几个常数优化: $1.$为了避免用at ...
- hdu1272 小希的迷宫
Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该 ...
- [深入浅出WP8.1(Runtime)]文本框（TextBox）
4.4 文本框(TextBox) 文本框(TextBox)控件是表示一个可用于显示和编辑单格式.多行文本的控件.TextBox控件常用于在表单中编辑非格式化文本,例如,如果一个表单要求输入用户姓名.电 ...
- BZOJ4517: [Sdoi2016]排列计数
Description 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m 个数是 ...
- 团队计划backlog
http://www.cnblogs.com/threemonkey/p/5388439.html