MUI結合template-web請求資料遍歷顯示
阿新 • • 發佈：2019-01-03
1、首頁傳送ajax請求獲取資料，使用template對資料進行遍歷顯示2、點選列表進入詳情頁，在首頁的時候通過預載入詳情頁，傳入id到詳情頁，再發送ajax請求顯示資料<!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" /> <link href="css/detail.css" rel="stylesheet" /> <script src="js/template-web.js" type="text/javascript"></script> </head> <body> <header class="mui-bar mui-bar-nav "> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">首頁</h1> </header> <div class="mui-content"> <div id="slider" class="mui-slider banner" > <div class="mui-slider-group mui-slider-loop"> <!-- 額外增加的一個節點(迴圈輪播：第一個節點是最後一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img height="" src="http://placehold.it/400x300"> </a> </div> <!-- 第一張 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第二張 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 第三張 --> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!-- 額外增加的一個節點(迴圈輪播：最後一個節點是第一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="https://img.drawand.com/201805230405337026.jpg"> </a> </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <ul class="mui-table-view" id="list"> </ul> <script id="jsUserListTempl" type="text/html"> {{each data list}} {{if list.curr_suffix==" USDT"}} <li class="mui-table-view-cell mui-collapse" > <a class="mui-navigate-right" href="#">{{list.curr_a}}/{{list.curr_b}}</a> <div class="mui-collapse-content" id="{{list.pair}}"> <p>幣名:{{list.name_cn}}</p> <p>最新價格:${{list.rate}}</p> <p>供應量:{{list.supply}}</p> <p>市值:{{list.marketcap}}</p> </div> </li> {{/if}} {{/each}} </script> </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> var mask=mui.createMask();//遮罩層 mui.plusReady(function(){ mui.ajax('https://data.gateio.io/api2/1/marketlist',{ // data:{id:id}, dataType:'json',//伺服器返回json格式資料 type:'get',//HTTP請求型別 timeout:10000,//超時時間設定為10秒； beforeSend: function() { plus.nativeUI.showWaiting('正在載入'); mask.show();//顯示遮罩層 }, complete: function() { plus.nativeUI.closeWaiting(); mask.close();//關閉遮罩層 }, success:function(data){ //伺服器返回響應，根據響應結果，分析是否登入成功； console.log(JSON.stringify(data)); // console.log(data.data[0].name_cn); var html=template('jsUserListTempl',data); document.getElementById("list").innerHTML=html; }, error:function(xhr,type,errorThrown){ //異常處理； // console.log(type); } }); }); //初始化預載入詳情頁面 mui.init({ preloadPages:[{ id:'details.html', url:'details.html' } ] }); var detailPage = null; //新增列表項的點選事件 mui('.mui-table-view').on('tap', 'div', function(e) { var id = this.getAttribute('id'); // alert(id); //獲得詳情頁面 if(!detailPage){ detailPage = plus.webview.getWebviewById('details.html'); } console.log(detailPage); //觸發詳情頁面的newsId事件 mui.fire(detailPage,'detailIds',{ id:id }); //開啟詳情頁面 mui.openWindow({ id:'details.html' }); }); </script> </body> </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" /> <script src="js/template-web.js" type="text/javascript"></script> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title" id="header">詳情頁</h1> </header> <div class="mui-content"> <ul class="mui-table-view" id="details"> </ul> </div> <script id="jsUserListTempl" type="text/html"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">兌換貨幣交易量:{{quoteVolume}}</a> <a class="mui-navigate-right">交易量:{{baseVolume}}</a> <a class="mui-navigate-right">買方最高價:{{highestBid}}</a> <a class="mui-navigate-right">24小時最高價:{{high24hr}}</a> <a class="mui-navigate-right">最新成交價:{{last}}</a> <a class="mui-navigate-right">賣方最低價:{{lowestAsk}}</a> <a class="mui-navigate-right">24小時最低價:{{low24hr}}</a> </li> </script> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); //新增newId自定義事件監聽 window.addEventListener('detailIds',function(event){ //獲得事件引數 var id = event.detail.id; //根據id向伺服器請求新聞詳情 // alert(id); var mask=mui.createMask();//遮罩層 mui.plusReady(function(){ mui.ajax('https://data.gateio.io/api2/1/ticker/'+id,{ // data:{id:id}, dataType:'json',//伺服器返回json格式資料 type:'get',//HTTP請求型別 timeout:10000,//超時時間設定為10秒； beforeSend: function() { plus.nativeUI.showWaiting('正在載入'); mask.show();//顯示遮罩層 }, complete: function() { plus.nativeUI.closeWaiting(); mask.close();//關閉遮罩層 }, success:function(data){ //伺服器返回響應，根據響應結果，分析是否登入成功； console.log(JSON.stringify(data)); // console.log(data.data[0].name_cn); var html=template('jsUserListTempl',data); document.getElementById("details").innerHTML=html; }, error:function(xhr,type,errorThrown){ //異常處理； // console.log(type); } }); }); }); </script> </body> </html>
