mui---子页面调用父页面的自定义方法

目前在开发APP的时候，有这样的一个需求：需要在登录页面返回后能够刷新父页面。

功能是这样的：在 A.html页面有头像和用户昵称，这些信息需要用户进行登录才能够拿到，登录页面是在B.html，点击A.html页面，跳转到B.html进行登录，在B.html登录成功后返回，返回的时候需要更新A.html的头像和用户昵称。

方法：在B.html页面点击返回的时候，触发A.html页面的自定义方法来实现。

具体看代码：项目是用VUE来做的，所以...

B.html ：添加 beforeback方法：

mounted: function(){
    mui.init({
        beforeback:function(){
            var list = plus.webview.getWebviewById('music-index.html');
            mui.fire(list,'refresh');
            return true;
        },
    });
},

A.html 做接受这个方法，当然这个fire还可以进行传递参数

mounted: function() {        
    window.addEventListener('refresh',()=>{
        console.log('refresh fun');
        this.initialize(); // 具体方法
    });        
},

 简答示例：a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/mui.min.css">
<style type="text/css">
*{margin:0px; padding:0px;}
div.main{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; background:#eee;}
div.main-scroll{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; overflow: scroll;}
ul.list{width: 100%;}
ul.list li{width: 100%; line-height: 40px; padding-left: 10px;}
</style>
</head>
<body>
<div class="main" id="main">
    <div class="main-scroll">
        <ul class="list">
            <li v-for="x in list" @tap="details">{{x}}</li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript">
var main = new Vue({
    el: "#main",
    data: {
        list:[],
        num:0,
    },
    mounted: function() {
        this.getList();
        window.addEventListener('init',()=>{
            this.initialize(); // location.reload();
        });        
    },
    watch: {},
    methods: {  
        initialize:function(){
            this.num ++;
            this.getList();
        },
        getList:function(){
            var lists = [];
            for(var i=0; i<50; i++){
                lists.push("第"+this.num+"个");
            };
            this.list = lists;
        },
        details:function(){
            mui.openWindow({
                url:'./a-details.html',
                id:'a.html',
                createNew:true,
                styles:{top:'0px',bottom:'0px'},
                show:{autoShow:true,aniShow:'slide-in-bottom',duration:260},
                waiting:{autoShow:false,title:'',options:{}}
            });
        },
    }
});
</script>
</html>

跳转到详情：a-details.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/mui.css">
<style type="text/css">
div.main{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; background:#eee;}
div.main-scroll{width: 100%; position: absolute; top:0px; right:0px; bottom:0px; left:0px; overflow: scroll; background:orange;}
</style>
</head>
<body> 
<div class="main">
    <div class="main-scroll">
        <button class="mui-action-back">点击返回</button>
    </div>
</div>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript">
var main = new Vue({
    el: "#main",
    data: {
        list:[],
    },
    mounted: function(){
        mui.plusReady(()=>{
            var selfWindow = plus.webview.currentWebview();
            // 如果是固定的跳转 可以直接返回到固定的页面
            // 如果点击进来的页面不固定 需要将点击来的页面ID传递过来
            mui.init({
                beforeback:function(){
                    var parent = plus.webview.getWebviewById('a.html');
                    // 还可以传值 mui.fire('home.html','init',{mid:3});
                    mui.fire(parent,'init');                   
                    return true;
                },
            });
        });        
    },
    watch: {},
    methods: {  
        initialize:function(){          
            this.getUserInfo();
            this.getMusicList();
            this.getFigureList();
        }, 
    }
});
</script>
</body>
</html>

 

posted @ 2019-01-25 13:28  帅到要去报警  阅读(1705)  评论(0)  编辑  收藏  举报