基于Html5 Plus + Vue + Mui 移动App 开发（二）
程序员文章站
2022-03-28 20:01:58
基于Html5 Plus + Vue + Mui 移动App 开发（二） 界面效果： 本页面采用Html5 Plus + Vue + Mui 开发移动界面，本页面实现： 1、下拉刷新、上拉获取更多功能； 2、使用Vue 进行数据绑定； 3、使用WebView 创建打开新的界面； 源码如下： App下 ......
基于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 欢迎提供宝贵意见！
推荐阅读
-
基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)
-
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
-
基于Html5 Plus + Vue + Mui 移动App 开发（二）
-
基于html5 plus + Mui 移动App开发（一）
-
连接真机开发安卓(Android)移动app MUI框架——混合式开发（二） 带你项目开发（敲详细）
-
有人说基于成熟后的HTML5 移动web应用才是未来，因为省去了app移动应用在不同终端的开发时间。基于终端的移动应用也会走下舞台，各位怎么认为？
-
基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)
-
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
-
基于Html5 Plus + Vue + Mui 移动App 开发（二）
-
基于html5 plus + Mui 移动App开发（一）