mui常用方法

读立写生 2018-05-20

1.打开新页面传值

发送:

mui.openWindow({

url:'info.html',

id:'info.html',

extras:{

name:'mui',

version:'0.5.8'

}

});

接收:

var self = plus.webview.currentWebview();

var name = self.name;

var version = self.version;

2.已经打开页面之间的传值(自定义事件)

发送:

当前页面: var currentView=plus.webview.currentWebview();

当前子页面:var cView=plus.webview.currentWebview().children()[0];

当前父页面:var cView=plus.webview.currentWebview().parent();

当前页面的创建页面:var cView=plus.webview.opener();

起始页面:var launchView=plus.webview.getLaunchWebview();

根据id获得页面: var index=plus.webview.getWebviewById("backHtml");

mui.fire(webView,"index_home",{

"areaName":name

});

接收端

window.addEventListener('index_home', function(event) {

var areaNamehtml = document.getElementById("areaName");

areaNamehtml.innerHTML=event.detail.areaName;

});

//可以单独定义方法名

window.addEventListener("swipeleft",closeMenu);

function closeMenu () {}

3.页面事件绑定

使用html5统一写法document.getElementById("button").addEventListener('tap事件代码见下方',

function() {

alert(1);

});

2.列表类绑定事件

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){

//获取id

var id = this.getAttribute("id");

//进行处理

//...

})

注意:MUI的TAP事件在部分手机上会执行2次

事件代码:

分类

参数

描述

点击

tap

单击屏幕

doubletap

双击屏幕

长按

longtap

长按屏幕

hold

按住屏幕

release

离开屏幕

滑动

swipeleft

向左滑动

swiperight

向右滑动

swipeup

向上滑动

swipedown

向下滑动

拖动

dragstart

开始拖动

drag

拖动中

dragend

拖动结束

4.本地存储参数(与服务器端session类似)注:只能存储字符串,数字存不进

存值:

plus.storage.setItem('uuid', result.uuid);

取值:

plus.storage.getItem('uuid);

5. Ajax 请求使用

mui.post('http://server-name/login.php',{

username:'username',

password:'password'

},function(data){

//服务器返回响应,根据响应结果,分析是否登录成功;

...

},'json');

2.

mui.ajax(url, {

data: {},

dataType: 'json', //服务器返回json格式数据

type: 'post', //HTTP请求类型

timeout: 10000, //超时时间设置为10秒;

success: function(data) {

},

error: function(xhr, type, errorThrown) {

//异常处理;

plus.nativeUI.closeWaiting();

plus.nativeUI.toast("检查更新失败,请稍后再试");

console.log(type);

}

});

6.关闭,刷新,返回,加载中

关闭:

var ws=plus.webview.currentWebview();

plus.webview.close(ws);//可以是窗口对象或者id

mui.back();//当前页面关闭

刷新:

location.reload();

加载中

plus.nativeUI.showWaiting("加载中");

plus.nativeUI.closeWaiting();

7.监控返回操作,刷新上一个页面

mui.plusReady(function() {

var old_back = mui.back;

mui.back = function() {

var opener = plus.webview.currentWebview().opener();

opener.reload()

old_back();

}

});

8.首页模拟选项卡点击切换

var defaultTab = document.getElementById("defaultTab");//选项卡id

//模拟首页点击

mui.trigger(defaultTab, 'tap');

//切换选项卡高亮

var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");

if(defaultTab !== current) {

current.classList.remove('mui-active');

defaultTab.classList.add('mui-active');

}

相关推荐