(五)关闭页面

最新推荐文章于 2022-08-23 09:58:26 发布

三天不学习

最新推荐文章于 2022-08-23 09:58:26 发布

阅读量270

点赞数

分类专栏：【移动端开发】MUI 文章标签： mui

【移动端开发】MUI 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

本节知识点

三种方式关闭页面

关闭页面

点击顶部导航栏的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>

作者：我拥抱着我的未来
链接：https://www.jianshu.com/p/204d10634d21
來源：简书