官方demo:http://dev.dcloud.net.cn/mui/event/

假设如下场景:从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻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向服务器请求新闻详情
.....
});

将id传过去,根据id显示下面的详情页面的更多相关文章

  1. day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器

    目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...

  2. 传多个id 存入一个容器里,让另一个页面接受并显示数据

    要传页面的id: <ul class="contrast-ul"> <!-- <li>id都在这里面</li> --> </u ...

  3. 获取jsp选中复选框的id传到后台controller,进行逻辑删除等操作

    逻辑删除设备:(数据表中还有这条记录,不显示出来) 思路: 数据表加个字段display,值为Y/N,只显示display为Y的,删除时,把display的值改为N,就不会显示出来 jsp页面如下图, ...

  4. 重复ID的记录,只显示其中1条

    --重复ID的记录,只显示其中1条 --生成原始表 select * into #tempTable from ( select '1' as id ,'a' as name union all se ...

  5. 基于uploadify.js实现多文件上传和上传进度条的显示

    uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...

  6. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  7. 不带插件 ,自己写js,实现批量上传文件及进度显示

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...

  8. commons-fileupload实现上传进度条的显示

    本文将使用   apache fileupload   ,spring MVC   jquery 实现一个带进度条的多文件上传, 由于fileupload 的局限,暂不能实现每个上传文件都显示进度条, ...

  9. 转: unix实际用户ID和有效用户ID解析

    今天在看APUE,这两个问题很难理解,GOOGLE一下,有篇文章总结的不错,看了一下才明白透彻了. 由于用户在UNIX下经常会遇到 SUID.SGID的概念,而且SUID和SGID涉及到系统安全,所以 ...

随机推荐

  1. discuz管理员登录进入后台管理马上跳转到登录界面

    昨天尝试了一下这个discuz论坛,感觉还可以.今天刚刚用管理员账户进入后台管理,准备改一改界面熟悉一下,过不了10秒钟.老是马上就退出来了.我想起来了,昨天是在阿里云服务器上面直接登录这个管理员账号 ...

  2. Docker了解

    Docker了解1.Docker能做什么:Docker能够解决虚拟机能够解决的问题,同时也能够解决虚拟机由于请求资源过高无法解决的问题. *隔离应用依赖 *创建应用镜像并进行复制 *创建容易分发的即启 ...

  3. Eclipse配置tomcat程序发布到哪里去了?

    今天帮同事调一个问题,明明可以main函数执行的,他非要固执的使用tomcat执行,依他.但是发布到tomcat之后我想去看看发布后的目录,所以就打开了tomcat中的webapps目录,可是并没有发 ...

  4. ThreadLocal从源码到应用

    最早接触到ThreadLocal是在阅读dianping的Cat-client,当时对它不是很理解,就搜索了一下,大概了解是一种解决线程安全问题的机制.现在再次阅读<实战java高并发程序设计& ...

  5. requireJS教程

    目录[-] 使用 RequireJS 优化 Web 应用前端 AMD 简介 传统 JavaScript 代码的问题 AMD 的引入 清单 1. AMD 规范 RequireJS 简介 实战 Requi ...

  6. JavaScript 之DOM&BOM

    重点来了 : BOM对象 window对象 : 所有浏览器都支持window对象. 概念上讲 : 一个html文档对应一个window对象. 功能上讲 : 控制浏览器窗口的. 使用上讲 : windo ...

  7. Python学习_05_条件、循环

    条件 和其他语言类似,python中使用if...elif...else来形成分支,支持三目操作符 ?:,python中没有switch,但是缩进的特性让if...elif...else的结构同样便于 ...

  8. centos虚拟机初始化脚本

    功能 修改主机名为node. 网卡开机启动并设置ip为静态18.8 更新yum源为国内yum源,并安装vim lrzsz wget man ntpdate软件. 关闭iptables selinux, ...

  9. rpc之thrift

    rpc之thrift 一.介绍 thrift是一个rpc(remove procedure call)框架,可以实现不同的语言(java.c++.js.python.ruby.c#等)之间的相互调用. ...

  10. IntelliJ IDEA2017.3 激活

    网上IntelliJ IDEA激活方式大多均已失效,目前常用激活方式为License Server 激活: http://idea.imsxm.com/ NOTE: 在上周五2017-12-1那天还是 ...