基於Html5 Plus + Vue + Mui 移動App 開發（二）
阿新 • • 發佈：2018-09-05
spa mar oot ready sca ror extra ref 連接
基於Html5 Plus + Vue + Mui 移動App 開發（二）
界面效果：
本頁面采用Html5 Plus + Vue + Mui 開發移動界面，本頁面實現：
1、下拉刷新、上拉獲取更多功能；
2、使用Vue 進行數據綁定；
3、使用WebView 創建打開新的界面；
源碼如下：
<!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> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 id="title" class="mui-title">實全科技</h1> </header> <div class="mui-content mui-scroll-wrapper" id="tableView"> <div class="mui-card" v-for="item in news"> <div class="mui-card-header"> <label v-html="item.title">營業執照</label> </div> <div class="mui-card-content"> <div class="mui-card-content-inner mui-navigate-right" @tap="opendetail(item)" > <p v-html="item.content"></p> <div style="background:no-repeat;" v-for="url in item.imageUrls"> <img v-bind:src="url" style="width:100%;display:inline-block;height:auto;" /> </div> </div> </div> <div class="mui-card-footer"> <h5>時間：<label v-html="item.publishDateStr"></label> 作者：<label v-html="item.posterScreenName"></label></h5> </div> </div> <div style="margin-bottom: 20px; text-align: center;"></div> </div> <script src="js/mui.min.js"></script> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/shiquan.setting.js" type="text/javascript"></script> <script type="text/javascript"> var vue = new Vue({ el: ‘#tableView‘, data: { news: [] //列表信息流數據 } }); //mui初始化，配置下拉刷新 mui.init({ pullRefresh: { container: ‘#tableView‘, down: { style: ‘circle‘, offset: ‘0px‘, auto: true, callback: function() { if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) { plus.nativeUI.toast(‘似乎已斷開與互聯網的連接‘, { verticalAlign: ‘top‘ }); return; } pullRefreshDown(); } }, up: { height: 50, auto: true, contentrefresh: ‘正在加載...‘, contentnomore: ‘沒有更多數據了‘, //可選，請求完畢若沒有更多數據時顯示的提醒內容； callback: pullupRefresh } } }); var loadData = false; var hasNext = false; var pageToken = ""; var keyword = ""; function pullRefreshDown(){ setTimeout(function(){ if(keyword == ""){ mui(‘#tableView‘).pullRefresh().endPulldown(); return; } if(loadData){ return; } //keyword = keyword || "新聞"; //請求列表信息流 let ajaxUrl = shiquan.SERVERURL+‘/news/qihoo?apikey=‘+shiquan.APIKEY + "&site="+shiquan.SITE + "&kw="+keyword; console.log("ajaxUrl="+ajaxUrl); mui.ajax(ajaxUrl,{ data:{}, dataType:‘json‘,//服務器返回json格式數據 type:‘get‘,//HTTP請求類型 timeout:30000,//超時時間設置為10秒； headers:{‘Content-Type‘:‘application/json‘}, success:function(result){ mui(‘#tableView‘).pullRefresh().endPulldown(); if(result.retcode != "000000"){ plus.nativeUI.toast("讀取失敗："+result.message); return; } console.log(JSON.stringify(result)); hasNext = result.hasNext; pageToken = result.pageToken; vue.news = result.data; }, error:function(xhr,type,errorThrown){ mui(‘#tableView‘).pullRefresh().endPulldown(); //異常處理； console.log("error:xhr="+xhr+" type="+type + " thrown="+errorThrown); } }); },1500); }; function pullupRefresh() { setTimeout(function() { console.log("hasNext:" + hasNext); console.log("pageToken:" + pageToken); mui(‘#tableView‘).pullRefresh().endPullup(hasNext == false); //參數為true代表沒有更多數據了。 if(hasNext == false) return; if(keyword == ""){ return; } //請求列表信息流 let ajaxUrl = shiquan.SERVERURL+‘/news/qihoo?apikey=‘+shiquan.APIKEY + "&site="+shiquan.SITE + "&kw="+keyword+"&pageToken="+pageToken; console.log("ajaxUrl="+ajaxUrl); mui.ajax(ajaxUrl,{ data:{}, dataType:‘json‘,//服務器返回json格式數據 type:‘get‘,//HTTP請求類型 timeout:30000,//超時時間設置為10秒； headers:{‘Content-Type‘:‘application/json‘}, success:function(result){ mui(‘#tableView‘).pullRefresh().endPulldown(); if(result.retcode != "000000"){ plus.nativeUI.alert("讀取失敗："+result.message); return; } console.log(JSON.stringify(result)); //vue.news = result.data; hasNext = result.hasNext; pageToken = result.pageToken; result.data.forEach(function(item) { vue.news.push(item); }); }, error:function(xhr,type,errorThrown){ mui(‘#tableView‘).pullRefresh().endPulldown(); //異常處理； console.log("error:xhr="+xhr+" type="+type + " thrown="+errorThrown); } }); }, 2000); } mui.plusReady(function() { var self = plus.webview.currentWebview(); keyword = self.keyword; document.getElementById("title").innerText = self.keyword || "實全科技"; }); /** * 打開新聞詳情 * * @param {Object} item 當前點擊的新聞對象 */ function opendetail(item) { mui.openWindow({ url: ‘360detail.html‘, id: ‘360detail‘, extras: { title:item.title, url: item.url } }); } </script> </body> </html>
App下載地址：http://m3w.cn/shiquan 歡迎提供寶貴意見！
基於Html5 Plus + Vue + Mui 移動App 開發（二）