MUI 事件管理

手势事件

分类	参数	描述
点击	tap	单击屏幕
	doubletap	双击屏幕
长按	longtap	长按屏幕
	hold	按住屏幕
	release	离开屏幕
滑动	swipeleft	向左滑动
	swiperight	向右滑动
	swipeup	向上滑动
	swipedown	向下滑动
拖动	dragstart	开始拖动
	drag	拖动中
	dragend	拖动结束

手势事件配置 

mui.init({
  gestureConfig:{
   tap: true, //默认为true
   doubletap: true, //默认为false
   longtap: true, //默认为false
   swipe: true, //默认为true
   drag: true, //默认为true
   hold:false,//默认为false，不监听
   release:false//默认为false，不监听
  }
});

 

 注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关。

 

事件绑定

单个元素上的事件监听，直接使用addEventListener()即可。

var tabButton = document.getElementById("orderType");
tabButton.addEventListener('tap', function(event) {
     console.log("你正在单击屏幕");
});

 

若多个元素执行相同逻辑， 也可以使用.on()方法实现批量元素的事件绑定。 

.on( event , selector , handler )

event

Type: String

需监听的事件名称，例如：'tap'

selector

Type: String

选择器

handler

Type: Function( Event event )

事件触发时的回调函数，通过回调中的event参数可以获得事件详情

示例

mui('body').on('tap','.searchBtn',function(){
  //获取id
  var id = this.getAttribute("id");
  //传值给详情页面，通知加载新数据
  mui.fire(detail,'getDetail',{id:id});
  //打开详情页
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 

 

事件触发

使用mui.trigger()方法可以动态触发特定DOM元素上的事件。

.trigger( element , event, data )

element

Type: Element

触发事件的DOM元素

event

Type: String

事件名字，例如：'tap'、'swipeleft'

data

Type: Object

需要传递给事件的业务参数

示例

自动触发按钮的点击事件：

var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
  console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');

 

自定义事件

在App开发中，经常会遇到页面间传值的需求，通过自定义事件，用户可以轻松实现多webview间数据传递。

添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加。

window.addEventListener('newsId',function(event){
  //'customEvent'为事件名
  //通过event.detail可获得传递过来的参数内容
  var id = event.detail.id;
});

 

触发自定义事件

通过mui.fire()方法可触发目标窗口的自定义事件：

.fire( target , event , data )

target

Type: WebviewObject

需传值的目标webview

event

Type: String

自定义事件名称

data

Type: JSON

json格式的数据

注意：目标webview必须触发loaded事件后才能使用自定义事件。

示例

// 父页面
var detailPage = plus.webview.getWebviewById('detail.html');
// 如果父页面有传递页面ID过来，也可以用更灵活的写法
var detailPage = plus.webview.getWebviewById(plus.webview.currentWebview().parentId);
 //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });

// 子页面
window.addEventListener('newsId',function(event){
  var id = event.detail.id;
});