mui.fire()触发自定义事件
导读:添加自定义事件监听操作和标准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
});
//打开详情页面
mui.openWindow({
id:'detail.html'
});
});
详情页面代码如下:
//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
//获得事件参数
var id = event.detail.id;
//根据id向服务器请求新闻详情
.....
});
mui.fire()触发自定义事件的更多相关文章
- C#中如何截取Windows消息来触发自定义事件
原文 C#中如何截取Windows消息来触发自定义事件 在c#windows开发中,我们常常会遇到拦截windows消息,来触发某个特定任务的问题. 由于目前使用c#的开发人员非常多,而且大多数c#程 ...
- Vue自定义事件:触发自定义事件
一 项目结构 二 子组件(Mongo.vue) <template> <button @click="eat">按钮</button> < ...
- mui自定义事件实例
监听自定义事件(接收页面应用) 添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下: window.addEventListener('customEvent',fun ...
- 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)
四.伪DOM自定义事件 这里的“伪DOM自定义事件”是自己定义的一个名词,用来区分DOM自定义事件的.例如jQuery库,其是基于包装器(一个包含DOM元素的中间层)扩展事件的,既与DOM相关,又不直 ...
- jquery的自定义事件通过on绑定trigger触发
jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...
- 自定义事件的触发dispatchEvent
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: documen ...
- (转)js原生自定义事件的触发dispatchEvent
1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: 1 2 3 d ...
- mui.fire() 和 mui.trigger()
导读:添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,通过mui.fire()方法可触发目标窗口的自定义事件 监听自定义事件 添加自定义事件监听操作和标准js事件监听类似 ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
随机推荐
- .net 调用 Matlab生成dll出现的问题(The type initializer for 'MathWorks.MATLAB.NET.Utility.MWMCR' threw an exception.)
https://cn.mathworks.com/matlabcentral/answers/278399-i-get-an-error-saying-the-type-initializer-for ...
- React将某段文字插入到某个元素里
最基本使用: 引入依赖文件: <script src="https://unpkg.com/react@16/umd/react.development.js">< ...
- IVideoWindow 在directshow采集链路中的使用
dshow中一个完整采集链路一般如下: Capture Device----->SampleGraber ------>Render 如果只要采集原始数据可以不用渲染链路那就如下: Cap ...
- python中的异常处理常用方法
异常处理 什么是异常? 异常就是与正常情况不同,程序在执行过程中出现错误,导致无法执行完毕.异常其实就是代码执行过程中出错. 常见的一些异常 AttributeError 试图访问一个对象没有的属性, ...
- 使用::befor和::after伪元素在网站中添加图标
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,: ...
- HDU 5734 Acperience(数学推导)
Problem Description Deep neural networks (DNN) have shown significant improvements in several applic ...
- [Java核心技术笔记]并发
Runnable Runnable接口是函数式接口 //Runnable接口 public interface Runnable { void run(); } //用lambda表达式创建实例 Ru ...
- [leetcode]24. Swap Nodes in Pairs交换节点对
Given a linked list, swap every two adjacent nodes and return its head. You may not modify the value ...
- 安装Ubuntu 18.04后的一些操作
安装Ubuntu 18.04后的一些操作 1.设置root密码 sudo passwd 2.登陆root(输入密码后看到井号就是切换成为root账户) su 3.删除预装 apt-get remove ...
- 可视化-echarts流向图制作
案例: http://www.internetke.com/jsEffects/2018040406/ 前段时间用echarts做了流程图,在此记录下制作步骤. 一.Echarts是什么 Echart ...