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 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<!--头部信息-->
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">知乎日报</h1>
		</header>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				subpages: [{
					url: 'html/content.html',
					id: 'content.html',
					styles: {
						top: '45px', //mui标题栏默认高度为45px；
						bottom: '0px' //默认为0px，可不定义；
					}
				}]
			});
		</script>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">邮件</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
	</body>
</html>

3.拷贝 content.html 代码：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-slider">
				<div class="mui-slider-group">
					<!--第一个内容区容器-->
					<div class="mui-slider-item">
						<!-- 具体内容 -->
						<img src="../img/1D52F569E73F611465E9BB3656E9628B.png" />
					</div>
					<!--第二个内容区-->
					<div class="mui-slider-item">
						<!-- 具体内容 -->
						<img src="../img/8CF9B879550CD10AA9B7B58777367C7F.png" />
					</div>
				</div>
			</div>
			<ul class="mui-table-view" id="zhihu">
			</ul>	
		</div>
		<script src="../js/mui.min.js"></script>
		<!-- 导入 template-web.js
			官网下载：http://aui.github.io/art-template/
			csdn下载：https://download.csdn.net/download/qq_40147863/10689407
		-->
		<script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
		<!-- 使用<script id="list" type="text/html"> 拼接 html -->
		<script id="list" type="text/html">
			    <!-- 循环语法 -->
			    {{each stories as list}}
				<li class="mui-table-view-cell mui-media" id="{{list.id}}">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="{{list.images[0]}}">
						<div class="mui-media-body">
							<!-- 获取 title -->
							{{list.title}}
						</div>
					</a>
				</li>
				{{/each}}
			</script>
		<script type="text/javascript">
			//plusReady，用来定义加载dom后的操作
			mui.plusReady(function() {
				//发起 ajax请求，地址使用知乎日报 api
				mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
					/* data 是参数，我们这里不需要，我们只是从 api获取数据
					data: {
						username: 'username',
						password: 'password'
					},
					*/
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						//我们现在控制台打印一下请求结果
				        //console.log(data)
						//然后获取json数据中的具体值
				        //console.log(data.stories[0].title)
				        //list 对应上面的 id，就是得到 拼接的 html
				        var html = template('list', data);
				        //把得到的 html 放到id为 zhihu 的 ul 标签里
				        document.getElementById("zhihu").innerHTML = html;
				        //console.log(html);
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
			});
			//网页预加载
			mui.init({
			  preloadPages:[{
			    id:'info',
			    url:'info.html'
			  }
			  ]
			});
			var detailPage = null;
			//添加列表项的点击事件
			mui('.mui-table-view').on('tap', 'li', function(e) {
			  var id = this.getAttribute('id');
			  //获得详情页面
			  if(!detailPage){
			    detailPage = plus.webview.getWebviewById('info');
			  }
			  //触发详情页面的newsId事件
			  mui.fire(detailPage,'id',{
			    id:id
			  });
			//打开详情页面
			  mui.openWindow({
			    id:'info'
			  });
			});
		</script>
	</body>
</html>

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

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content">
			<ul class="mui-table-view" id="newsinfo"></ul>
<script id="lists" type="text/html">
			  {{body}}
			</script>
		</div>
		<script src="../js/mui.min.js"></script>
		<!-- 导入 template-web.js
			官网下载：http://aui.github.io/art-template/
			csdn下载：https://download.csdn.net/download/qq_40147863/10689407
		-->
		<script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			mui.init();
			//添加newId自定义事件监听
			window.addEventListener('id', function(event) {
				//获得事件参数
				var id = event.detail.id;
				//根据id向服务器请求新闻详情
		    //plusReady，用来定义加载dom后的操作
			mui.plusReady(function() {
				//发起 ajax请求，地址使用知乎日报 api
				mui.ajax('https://news-at.zhihu.com/api/4/news/'+ id, {
					/* data 是参数，我们这里不需要，我们只是从 api获取数据
					data: {
						username: 'username',
						password: 'password'
					},
					*/
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						//我们现在控制台打印一下请求结果
						console.log("666");
				        console.log(data);
						//然后获取json数据中的具体值
				        //console.log(data.stories[0].title)
				        //list 对应上面的 id，就是得到 拼接的 html
				        var html = template('lists', data);
				        //把得到的 html 放到id为 zhihu 的 ul 标签里
				        document.getElementById("newsinfo").innerHTML = data.body;
				        //console.log(html);
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
			});
			});
		</script>
	</body>
</html>

项目运行

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

更多文章链接：MUI 框架

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

MUI框架-10-MUI 数据交互-跳转详情页面的更多相关文章

使用mui框架后a标签无法跳转
由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添 ...
mui框架中底部导航的跳转1
mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳 ...
在ssm框架中前后台数据交互均使用json格式
前后台数据交互均使用json. 框架ssm(spring+springmvc+mybatis) @RequestBody注解实现接收http请求的json数据,将json数据转换为java对象,注解加 ...
mui框架中底部导航的跳转2
接上一篇还有一种方法就是在一心得页面中打开我们所需要的网页代码如下: 向新的的页面穿值: 获取到新页面上的值:
ssm框架前后端数据交互完整示例
1.sprinMvc控制层 package com.dengfeng.house.controller; import java.text.ParseException; import java.ut ...
JavaScript Post提交数据并跳转到页面（模拟Form表单提交）
function GotoWatchTicketCode() { var orderID='@ViewBag.OrderInfo.OrderID'; var phoneNum='@ViewBag.Or ...
webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）
地址:https://segmentfault.com/a/1190000010063757 1.前言今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
MUI框架-09-MUI 与后台数据交互
MUI框架-09-MUI 与后台数据交互本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

随机推荐

npm install 报错：ERR! code EINTEGRITY 解决方案
npm升级后,npm install 报错了,报错信息:ERR! code EINTEGRITY到处百度搜索解决方案,终于找到了!“npm cache verify”这条命令帮助了不少人 npm ca ...
windows mobile ,wince 系统，用代码启动cab文件安装
有时候需要用代码来启动安装cab,以下是代码.不能实现静默安装. 启动后会提示用户是否安装,需要用户点击是才行. using System; using System.Collections.Gene ...
IO流（二）字符流
1.字符流:在字节流的基础上添加了编码机制.很大程度上和字节流操作一样的,字符流只能操作文本类文件,准确的说应该是纯文本类文件.例如.txt,.java,.cpp,.html等编码:每一个国家都有自 ...
Javac的命令（-Xlint）
在OptionName类中的枚举定义如下: XLINT("-Xlint"), XLINT_CUSTOM("-Xlint:"), -Xlint Enabl ...
MongoDB数据库及其Python用法
一 .命令行模式 mongo # 进入mongodb命令行模式 show dbs use taobao # 进入该数据库,如不存在则创建之 show tables # 条件操作符 (>) 大于 ...
1-1、create-react-app 配置 mobx
1.用npx create-react-app my-app安装项目 2.cd my-app 3.执行 npm run eject 让配置文件可见 4.npm install --saveDev ...
各种数据库maven的pom文件编写与ibernate链接配置
各种数据库Hibernate链接配置 Derby db driver maven dependency <dependency> <groupId>org.ap ...
基于 Annotation 的 Spring AOP 权限验证方法的实现
1. 配置 applicationContext 在 Spring 中支持 AOP 的配置非常的简单,只需要在 Spring 配置文件 applicationContext.xml 中添加: < ...
springmvc 定时器多数据源
0.目的:测试网上多数据源切换代码靠不靠谱 1.先说需求:根据摄像头采集到的数据,做一些业务上的特定处理,但是,但是很重要,摄像采集数据不直接存在此数据库,需要定时的去外部DB去取数据,这就涉及到多数 ...
SqlServer 2008 还原数据库的问题
今天想把服务器上的一个SqlServer2005的数据库还原到本地 SqlServer2008的数据库, 操作是报错:备份集中的数据库备份与现有的 'zyehouqin' 数据库不同. RESTOR ...

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

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

MUI 事件管理

项目搭建

源代码文件：

项目运行

更多文章链接：MUI 框架

MUI框架-10-MUI 数据交互-跳转详情页面的更多相关文章

随机推荐

热门专题