MUI框架-10-MUI 数据交互-跳转详情页面

MUI框架-10-MUI 数据交互-跳转详情页面

• 上一篇介绍了如何实现数据交互，给别人的 API 发送 ajax 请求，我们得到数据，再使用 art-template 模板引擎拼接 HTML，最终实现实现数据交互，如果还没有接触，请先学习：MUI框架-09-MUI 与后台数据交互
• 本篇介绍 MUI 事件管理，实现点击新闻列表跳转详情页的效果
• 放上一张图：
  
• 官方文档：MUI 事件管理

MUI 事件管理

• 事件绑定：MUI 的事件绑定，除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定
• 我们先看一下官方文档实例：
  • 点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面
  • 这里 mui，前面是一个 id 选择器，下面一个 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'
  });
}) 

项目搭建

• 因为我们这个最好是跟着我的 文章从开始看，因为后面的文章 需要前面的基础
• 请先查看： MUI框架-09-MUI 与后台数据交互
• 先按照下面目录，建好项目：
  

源代码文件：

• 因为代码比较复杂，分开讲太乱，大家可以拷贝，详解写在注释，

• 1.首先需要自己下载只有 template-web.js 文件，获取方法：

  • 1.官网下载：http://aui.github.io/art-template/zh-cn/index.html
  • 2.csdn下载：https://download.csdn.net/download/qq_40147863/10689407
  • 3.如果你会用 npm 包管理器，那么建议新建一个文件夹，因为我们只需要一个 template -web.js 文件，我们有很多都不需要，使用如下代码：

  npm install art-template --save

  • 然后按下面路径找到 template-web.js ：
    

• 2.拷贝 index.html 代码：

	
		
		
		
		
		

		

	

	
		
		

			
			
知乎日报
		

		

		

			
				
				首页
			
			
				
				电话
			
			
				
				邮件
			
			
				
				设置
			
		
	

• 3.拷贝 content.html 代码：

• 4.拷贝详情页 info.html 代码：

项目运行

• 注意：只能在真机运行，或者安卓模拟器运行
• 如果没有安卓手机，请配置模拟器，我这里使用的是夜神安卓模拟器，配置方法：
• 请参考：MUI框架-07-HBuilder+夜神安卓模拟器 配置

更多文章链接：MUI 框架

---

- 本笔记不允许任何个人和组织转载