基于html5 plus + vue + mui 移动app 开发(二)
界面效果：
本页面采用html5 plus + vue + mui 开发移动界面，本页面实现：
1、下拉刷新、上拉获取更多功能；
2、使用vue 进行数据绑定；
3、使用webview 创建打开新的界面；
源码如下：
实全科技实全科技
营业执照
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
}
});
}