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 ...
随机推荐
- 廖雪峰js教程笔记 1
遍历Array可以采用下标循环,遍历Map和Set就无法使用下标.为了统一集合类型,ES6标准引入了新的iterable类型,Array.Map和Set都属于iterable类型. 具有iterabl ...
- AOP动态代理解析1-标签的解析
spring.handlers http\://www.springframework.org/schema/aop=org.springframework.aop.config.AopNamespa ...
- hdu4289 最小割最大流 (拆点最大流)
最小割最大流定理:(参考刘汝佳p369)增广路算法结束时,令已标号结点(a[u]>0的结点)集合为S,其他结点集合为T=V-S,则(S,T)是图的s-t最小割. Problem Descript ...
- SPOJ DISUBSTR 后缀数组
题目链接:http://www.spoj.com/problems/DISUBSTR/en/ 题意:给定一个字符串,求不相同的子串个数. 思路:直接根据09年oi论文<<后缀数组——出来字 ...
- jquerymobile 基础教程
http://www.w3cplus.com/blog/tags/331.html?page=1
- http://blog.csdn.net/czmchen/article/details/42392985
http://blog.csdn.net/czmchen/article/details/42392985
- DP(记忆化搜索) + AC自动机 LA 4126 Password Suspects
题目传送门 题意:训练指南P250 分析:DFS记忆化搜索,范围或者说是图是已知的字串构成的自动机图,那么用 | (1 << i)表示包含第i个字串,如果长度为len,且st == (1 ...
- git 学习笔记7--branch
分支是git的必杀技. 站点另一个角度,分支是的快照移动有向图,刚好是拓扑排序的一种例子. basic git branch testing #创建分支 git checkout testing #切 ...
- Angular JS笔记
1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...
- CSS-布局【1】-图片在div中垂直居中
方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...