手势事件
分类 | 参数 | 描述 |
---|---|---|
点击 | 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 事件触发时的回调函数,通过回调中的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;
});