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: {} //自定义扩展参数
});

子页面使用场景

子页面适用于侧滑菜单

子页面适用于频繁切换的情况

子页面适用于下拉刷新和上
ceba
拉加载

二、页面传参

通过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