本节知识点
- 三种方式关闭页面
关闭页面
- 点击顶部导航栏的mui-action-back键能返回
- 右滑关闭页面，默认是关闭状态
- 安卓系统点击返回键
第一个只要有那个类就执行返回事件
右滑和点击返回需要在MUI中配置
具体见代码
mui.init({
//点击包含.mui-action-back类的控件
swipeBack:true, //启用右滑关闭功能,默认就是false
keyEventBind: {
backbutton: false //关闭back按键监听
}
})
父元素页面代码
<!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" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">在打开新的页面测试关闭页面</h1>
</header>
<div class="mui-content">
<button id="btn1">打开新的页面</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var btn1 = document.querySelector("#btn1");
function openpage(){
mui.openWindow({
url: 'close.html', //需要打开页面的url地址
id: 'close', //需要打开页面的url页面id
styles: {
top: '0px', //新页面顶部位置 要是新的页面有导航就是0要是没有就是44px
bottom: '0px', //新页面底部位置 要是新的页面有导航就是0要是没有就是50px
// width:newpage-width,//新页面宽度，默认为100%
// height:newpage-height,//新页面高度，默认为100% ......
},
extras: {
name: 'aries',
age: '18',
// .....//自定义扩展参数，可以用来处理页面间传值
},
show: { //控制打开页面的类型
autoShow: true, //这里要是配合子页面的异步加载数据就是false，等子页面加载完数据后子页面控制要是不需要就是true
// //页面loaded事件发生后自动显示，默认为true
aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“； 页面出现的方式 左右上下
duration: '1000' //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting: { // 控制 弹出转圈框的信息
autoShow: true, //自动显示等待框，默认为true
title: '加载中...', //等待对话框上显示的提示内容
// options:{
// width:'300px',//等待框背景区域宽度，默认根据内容自动计算合适宽度
// height:'300px',//等待框背景区域高度，默认根据内容自动计算合适高度 ......
// }
}
})
}
btn1.addEventListener("tap",openpage);
</script>
</body>
</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" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">这个就是点击返回的测试页面</h1>
</header>
<p>这个就是加载的子页面</p>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
//点击包含.mui-action-back类的控件
swipeBack:true, //启用右滑关闭功能,默认就是false
keyEventBind: {
backbutton: false //关闭back按键监听
}
})
</script>
</body>
</html>
