zoukankan      html  css  js  c++  java
  • 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向服务器请求新闻详情
      .....
    });
    

      

  • 相关阅读:
    spring bean-- autowired的正确用法
    @Autowired的使用:推荐对构造函数进行注释
    spring中bean的构造函数,Autowired(Value)注入与@PostConstruct调用顺序
    IconVault – 创建自定义图标字体的神器推荐
    Pure – 赞!轻量的、响应式的 CSS 模块集
    HTML Inspector – 帮助你编写高质量的 HTML 代码
    Tourist.js – 简单灵活的操作指南和导航插件
    分享!20套惊艳的扁平化设计素材免费下载
    Web 开发人员必备的随机 JSON 数据生成工具
    Sylius – 100% 免费和开源的电子商务解决方案
  • 原文地址:https://www.cnblogs.com/WebApp-DotNet/p/6698057.html
Copyright © 2011-2022 走看看