首页 > 代码库 > mui.fire()触发自定义事件
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()触发自定义事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。