mui.fire() 和 mui.trigger()
导读:添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,通过mui.fire()方法可触发目标窗口的自定义事件
监听自定义事件
添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:
window.addEventListener('customEvent',function(event){
//通过event.detail可获得传递过来的参数内容
....
});
触发自定义事件
通过mui.fire()方法可触发目标窗口的自定义事件
目标webview必须触发loaded事件后才能使用自定义事件
若新创建一个webview,不等该webview的loaded事件发生,就立即使用webview.evalJS()或mui.fire(webview,'eventName',{}),则可能无效
示例:
假设如下场景:从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通知详情页面需要显示具体哪个新闻,详情页面再动态向服务器请求数据,mui要实现类似需求可通过如下步骤实现:
- 在列表页面中预加载详情页面(假设为detail.html)
- 列表页面在点击新闻标题时,首先,获得该新闻id,触发详情页面的newsId事件,并将新闻id作为事件参数传递过去;然后再打开详情页面;
- 详情页面监听newsId自定义事件
列表页面代码如下:
//初始化预加载详情页面
mui.init({
preloadPages:[{
id:'detail.html',
url:'detail.html'
}
]
}); var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
var id = this.getAttribute('id');
//获得详情页面
if(!detailPage){
detailPage = plus.webview.getWebviewById('detail.html');
}
//触发详情页面的newsId事件
mui.fire(detailPage,'newsId',{
id:id
});
//打开详情页面 www.bcty365.com
mui.openWindow({
id:'detail.html'
});
});
详情页面代码如下:
//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
//获得事件参数
var id = event.detail.id;
//根据id向服务器请求新闻详情
.....
});
使用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');
部分mui控件监听的事件无法通过mui.trigger触发,比如无法实现自动触发mui返回图标,实现关闭当前页面的功能,该部分逻辑正在优化中
mui.fire() 和 mui.trigger()的更多相关文章
- mui.fire()触发自定义事件
导读:添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,通过mui.fire()方法可触发目标窗口的自定义事件. 监听自定义事件 添加自定义事件监听操作和标准js事件监听类 ...
- mui.fire 目标页无法监听到 触发事件
//获得详情页面 if(!detailPage){ detailPage = plus.webview.getWebviewById('detail.html'); } //触发详情页面的newsId ...
- mui.fire()用法,触发目标窗口的自定义事件
mui.fire( 目标窗口的webview , '自定义事件名' ,{参数列表}:) 目标窗口监听这个自定义事件 window.addEventListener('自定义事件名',function( ...
- mui.fire()用法
作用: mui.fire() 可以触发目标窗口的自定义事件 mui.fire( 目标窗口的webview , '自定义事件名' ,{参数列表}:) 目标窗口监听这个自定义事件 window.addEv ...
- 讨论mui 的 mui.init 与 mui.plusReady
先来看一段代码 (function(m, doc) { mui.plusReady(function(){ var self = plus.webview.currentWebview(); olti ...
- mui.init()和mui.plusReady()
1.每个用到mui的页面都调用下mui.init.2.如果需要使用大H5+对象,就写到plusReady中,如plus对象. HTML5+扩展api是针对手机APP的,只有才手机应用(比如手机浏览器) ...
- 一个mui扩展插件mui.showLoading加载框【转】
转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写 ...
- 解决在vue_cli上使用mui或引入mui.js各种报错及问题
原文:https://blog.csdn.net/u012815877/article/details/81187826 在main.js里添加 import mui from './assets/j ...
- MUI - sortable在mui.js前端框架不兼容的解决方案
关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github
随机推荐
- solr 启动过程分析
http://www.cnblogs.com/likehua/p/4353608.html#top
- 一段js代码的分析
function foo(a){ console.log(a+b); b=a+2; console.log(a+b); } foo(2); foo(3); var b=3; foo(4); 结果是: ...
- 前段基础HTML
HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5 ...
- poj 1192(树形DP)
最优连通子集 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2589 Accepted: 1382 Descriptio ...
- MySQL阅读笔记
左连接:包含所有的左边表中的记录甚至是右边表中没有和它匹配的记录.右连接:包含所有的右边表中的记录甚至是左边表中没有和它匹配的记录. select ename,deptname from emp le ...
- [BZOJ4556][Tjoi2016&Heoi2016]字符串 主席树+二分+倍增+后缀自动机
4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1215 Solved: 484[S ...
- java反射(基本知识)
在java中反射降低了模块间的依赖性这个过程称解耦---高内聚,低耦合 在java中,万物皆对象,则将字节码看成一个对象,将一个方法看成一个对象..... 反射--剖析类,分析类的字节码,产生对象的字 ...
- Java的Hashtable类(转)
文章来源:http://blog.csdn.net/zhna123_2011/article/details/6741479 ps:直接copy 哈希表是一种重要的存储方式,也是一种常见的检索方法.其 ...
- keyPoints的相关函数
cout<<"坐标:"<<keypoints1[i].pt; cout<<",邻域直径:"<<keypoints ...
- 大数模板(Java)
大数加法 /* 给出2个大整数A,B,计算A+B的结果. Input 第1行:大数A 第2行:大数B (A,B的长度 <= 10000 需注意:A B有可能为负数) Output 输出A + B ...