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

      

  • 相关阅读:
    HTML DOM教程 14HTML DOM Document 对象
    HTML DOM教程 19HTML DOM Button 对象
    HTML DOM教程 22HTML DOM Form 对象
    HTML DOM教程 16HTML DOM Area 对象
    ubuntu 11.04 问题 小结
    VC6.0的 错误解决办法 小结
    boot.img的解包与打包
    shell里 截取字符串
    从零 使用vc
    Imagemagick 对图片 大小 和 格式的 调整
  • 原文地址:https://www.cnblogs.com/WebApp-DotNet/p/6698057.html
Copyright © 2020-2023  润新知