MUI 页面跳转、传参与刷新

MUI教程

教程地址：http://www.hcoder.net/course/info_211.html

一、页面跳转

初始化时创建子页面

mui.init({  
    subpages: [{  
        url: your - subpage - url, //子页面HTML地址，支持本地地址和网络地址  
        id: your - subpage - id, //子页面标志  
        styles: {  
            top: subpage - top - position, //子页面顶部位置  
            bottom: subpage - bottom - position, //子页面底部位置  
            width: subpage - width, //子页面宽度，默认为100%  
            height: subpage - height, //子页面高度，默认为100%  
            ......  
        },  
        extras: {} //额外扩展参数  
    }]  
}); 

直接打开新页面

MUI封装了自己的页面打开的方法

mui.openWindow({  
    url: new - page - url,  
    id: new - page - id,  
    styles: {  
        top: newpage - top - position, //新页面顶部位置  
        bottom: newage - bottom - position, //新页面底部位置  
        width: newpage - width, //新页面宽度，默认为100%  
        height: newpage - height, //新页面高度，默认为100%  
        ......  
    },  
    extras: {  
        ..... //自定义扩展参数，可以用来处理页面间传值  
    }  
    show: {  
        autoShow: true, //页面loaded事件发生后自动显示，默认为true  
        aniShow: animationType, //页面显示动画，默认为”slide-in-right“；  
        duration: animationTime //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；  
    },  
    waiting: {  
        autoShow: true, //自动显示等待框，默认为true  
        title: '正在加载...', //等待对话框上显示的提示内容  
        options: {  
            width: waiting - dialog - widht, //等待框背景区域宽度，默认根据内容自动计算合适宽度  
            height: waiting - dialog - height, //等待框背景区域高度，默认根据内容自动计算合适高度  
            ......  
        }  
    }  
})  

预加载页面

// 方式1  
mui.init({  
    preloadPages: [{  
        url: prelaod - page - url,  
        id: preload - page - id,  
        styles: {}, //窗口参数  
        extras: {}, //自定义扩展参数  
        subpages: [{}, {}] //预加载页面的子页面  
    }]  
});  

// 方式2  
var page = mui.preload({  
    url: new - page - url,  
    id: new - page - id, //默认使用当前页面的url作为id  
    styles: {}, //窗口参数  
    extras: {} //自定义扩展参数  
});  

子页面使用场景

1. 子页面适用于侧滑菜单
2. 子页面适用于频繁切换的情况
3. 子页面适用于下拉刷新和上拉加载

二、页面传参

通过extras传参

// 传递参数
mui.openWindow({url:'B.html',extras:{id:'100'}});

// 接收参数

var self=plus.webview.currentWebview();//获取当前窗体对象
var receiveID=self.id;//接收A页面传入的id参数值

通过fire()传参

// 传递参数 ( 要触发其他页面的自定义监听事件必须要先进行页面的预加载)
mui.init({
     preloadPages:[{
       id:'detail.html',
       url:'detail.html'
      }]
 });
mui.fire(plus.webview.getWebviewById('page-id'), "pageRefresh",{
    name: 'zhangsan'
  })

//  接收参数
window.addEventListener("pageRefresh", function (e) {
    //获得事件参数
    var id = e.detail.id;
});

三、页面刷新

页面切换时刷新

webview有show事件及hide事件

先创建子页面

            var subpages = ['./views/tab-webview-subpage-home.html', './views/tab-webview-subpage-list.html','./views/tab-webview-subpage-map.html', './views/tab-webview-subpage-setting.html'];
            var subpage_style = { // 子页面位置调整
                top: '70px',
                bottom: '51px'
            };
            var aniShow = {};

             //创建子页面，首个选项卡页面显示，其它均隐藏；
            mui.plusReady(function() {
                var self = plus.webview.currentWebview();
                for (var i = 0; i < 4; i++) {
                    var temp = {};
                    var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
                    if (i > 0) {
                        sub.hide();
                    }else{
                        temp[subpages[i]] = "true";
                        mui.extend(aniShow,temp);
                    }

                    self.append(sub);
                }

                 plus.device.setWakelock(true);
            });

创建当前页的 show 监听事件。代码如下：

        mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            self.addEventListener('show',function(){
                console.log('show');
                // ... 后续为渲染页面代码
            });
        });

父页面A跳转到子页面B，B页面修改数据后再跳回A页面，刷新A页面数

// 父页面自定义页面刷新事件 
window.addEventListener("pageRefresh", function (e) {
    // 重新获取数据或触发刷新
});

// 子页面触发父页面的自定义页面刷新事件 
mui.fire(plus.webview.getWebviewById('page-id'), "pageRefresh" ); 

返回刷新

           mui.plusReady(function() {
                var old_back = mui.back;
                mui.back = function() {
                    var wobj = plus.webview.getWebviewById("page-id"); 
                    wobj.reload(true);
                    old_back();
                }
            });

H5+的重载方法

在子页面初始化时，注册beforeback方法；

mui.init({  
    beforeback: function() {  
        //获得列表界面的webview  
        var list = plus.webview.currentWebview().opener();  
        //触发列表界面的自定义事件（refresh）,从而进行数据刷新  
        mui.fire(list, 'refresh');  
        //返回true，继续页面关闭逻辑  
        return true;  
    }  
});  

// 或者~
mui.init({
    beforeback: function(){
        //获得列表界面的webview
        var i = plus.webview.getWebviewById("./views/lsit.html");
        if(i){
            //触发列表界面的自定义事件（refresh）,从而进行数据刷新
            i.evalJS("getUserInfo()");
        }
        return true;
    }
});

在父页面中添加事件监听

window.addEventListener('refresh', function(e) {  
        location.reload();  
})  

这样，在子页面执行返回操作mui.back()的时候，会执行父页面中的refesh事件，即location.reload()，刷新父页面；
官方文档说明：http://dev.dcloud.net.cn/mui/event/#customevent