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 與後臺數據交互
- 先按照下面目錄，建好項目：
源代碼文件：
-
由於代碼比較複雜，分開講太亂，你們能夠拷貝，詳解寫在註釋，javascript
-
1.首先須要本身下載只有 template-web.js 文件，獲取方法：css
- 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 --savehtml
- 而後按下面路徑找到 template-web.js ：
-
2.拷貝 index.html 代碼：java
<!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 框架
- 本筆記不容許任何我的和組織轉載相關文章
- 1. MUI框架-10-MUI 數據交互-跳轉詳情頁面
- 2. mui 頁面跳轉
- 3. MUI框架-09-MUI 與後臺數據交互
- 4. Mui-頁面跳轉傳遞參數
- 5. 基於mui框架 的連接帶值跳轉頁面判斷
- 6. Struts2框架與頁面的數據交互（1）--數據封裝
- 7. localStorge----前端頁面跳轉傳遞數據，無需交互
- 8. mui跳轉頁面關閉側導航
- 9. 淺談關於MUI的頁面跳轉
- 10. MUI移動端頁面跳轉
- 更多相關文章...
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • XSL-FO 頁面 - XSL-FO 教程
- • Flink 數據傳輸及反壓詳解
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章