MUI事件管理

最新推荐文章于 2022-04-10 10:16:29 发布

TaoLee-

最新推荐文章于 2022-04-10 10:16:29 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/TaooLee/article/details/53666057

ReactNative 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了移动端Web开发中常用的事件绑定方法，如addEventListener和mui框架提供的.on()方法，以及如何触发这些事件。此外还详细解释了手势事件的配置与使用，并展示了如何在不同页面间通过自定义事件进行数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档

事件绑定

1addEventListener()

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

2.on()

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

事件触发

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

手势事件

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

自定义事件

仅能在5+ App及流应用中使用
因为是多webview之间传值，故无法在手机浏览器、微信中使用；

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

触发自定义事件

目标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向服务器请求新闻详情
  .....
});