Knowledge points in this section
- Three ways to close the page
Close page
- Click the Mui action back key on the top navigation bar to return
- Right slide to close the page. It is closed by default
- Android click back
The first is to execute the return event as long as there is one
Right slide and click return need to be configured in MUI
See code for details
mui.init({
//Click on the control containing the. Mui action back class
swipeBack:true, //Enable the right slide close function, which is false by default
keyEventBind: {
backbutton: false //Turn off back key monitoring
}
})
Parent element page code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Close page</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">Test closing the page when opening a new page</h1>
</header>
<div class="mui-content">
<button id="btn1">Open a new page</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 address of the page to be opened
id: 'close', //url page id of the page to be opened
styles: {
top: '0px', //The top position of the new page is 0 if the new page has navigation, and 44px if not
bottom: '0px', //The bottom position of the new page is 0 if the new page has navigation, and 50px if not
// Width: new page width, / / new page width, default is 100%
// Height: newpage height, / / the height of the new page, which is 100% by default
},
extras: {
name: 'aries',
age: '18',
// ..... / / user defined extension parameters, which can be used to process inter page value transfer
},
show: { //Control the type of open page
autoShow: true, //Here, if the data is loaded asynchronously with the subpage, it is false. If the subpage control is not needed after the subpage loads the data, it is true
// //The page will be displayed automatically after the loaded event. The default value is true
aniShow: 'slide-in-right', //The page displays animation, which is "slide in right" by default; the page appears left and right up and down
duration: '1000' //Page animation duration, Android platform default 100ms, iOS platform default 200ms;
},
waiting: { // Control the information of the pop-up rotation box
autoShow: true, //Display the waiting box automatically, and the default is true
title: 'Loading...', //Wait for the prompt on the dialog
// options:{
// width:'300px', / / the width of the background area of the waiting box. By default, the appropriate width is calculated automatically according to the content
// height:'300px', / / the height of the background area of the waiting box. By default, the appropriate height is calculated automatically according to the content
// }
}
})
}
btn1.addEventListener("tap",openpage);
</script>
</body>
</html>
Subpage code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test close page</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">This is the test page returned by clicking</h1>
</header>
<p>This is the loaded subpage</p>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
//Click on the control containing the. Mui action back class
swipeBack:true, //Enable the right slide close function, which is false by default
keyEventBind: {
backbutton: false //Turn off back key monitoring
}
})
</script>
</body>
</html>
Author: I embrace my future
Link: https://www.jianshu.com/p/204d10634d21
Source: Jianshu