https://blog.csdn.net/qq_33323469/article/details/80241564
https://blog.csdn.net/Qinhaolei/article/details/77914680
apicloud下拉刷新详细例子
说到刷新这个问题，项目中遇到两端交互的问题，比如在一个端发布了一条任务，
另外一个端接了这个任务，我们有一个模块来显示各种状态的任务，当数据库这个任务状态变化了，我能做到的就是刷新来看这个任务的状态了
直接附上代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>任务管理_待接单</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style>
.user-information-list {
background-color: #fff;
}
.user-information-list ul li {
border: 0;
border-radius: 5px;
background-color: #f7f7f7;
}
</style>
</head>
<body>
<div id='list'>
<ul class="list-box" v-if='data.length>0'>
<li v-for='item in data'>
<p class="title">
<span class="aui-pull-left">任务编号：{{item.service_sn}}</span>
<span class="aui-pull-right aui-iconfont aui-icon-trash" v-if='item.status==4'></span>
<span class="aui-pull-right" v-if='item.status==1'>状态：待接单</span>
</p>
<p @click="goOrderShow(item.id)">
<span>{{item.service_name}}</span>
<span>发布时间：{{item.create_time}}</span>
<span>任务内容：{{item.content}}</span>
<span>任务地址：{{item.aera}}{{item.area_detail}}</span>
<span class="theme_color">{{item.price}}<i>元</i></span>
</p>
</li>
</ul>
<div v-else style="text-align:center;padding:20px;">
<p class="hui">
<!-- <img src="../image/no.png" alt=""> -->
</p>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../script/comment.js"></script>
<script type="text/javascript">
apiready = function() {
fnReady();
var index = 1;
var types = 1;
var vm = new Vue({
el: '#list',
data: {
data: []
},
methods: {
taskListWait() {
var _this = this;
api.showProgress({
title: '努力加载中...',
text: '',
modal: true
});
api.ajax({
url: URL_API + 'user/task_list/token/' + token,
method: 'post',
dataType: 'json',
data: {
values: {
status: index,
}
}
}, function(ret, err) {
// alert( JSON.stringify( ret ) );
if (ret.code == 1) {
_this.data = ret.data;
}else if (ret.code == -1) {
api.toast({
msg: ret.info
});
api.openWin({
name: 'login',
url:'./user/login/login.html',
});
}else {
api.toast({
msg: ret.info
});
}
});
api.hideProgress();
api.setRefreshHeaderInfo({
visible: true,
loadingImg: '../image/timg.gif',
bgColor: '#ccc',
textColor: '#fff',
textDown: '下拉刷新...',
textUp: '松开刷新...',
showTime: true
}, function(ret, err) {
_this.taskListWait();
setTimeout('api.refreshHeaderLoadDone()', '500');
});
},
//人物详情页
goOrderShow: function(id) {
api.openWin({
name: 'order_show',
url: './order_show.html',
pageParam: {
id: id,
type:types
}
});
},
},
created: function() {
this.taskListWait();
}
});
};
</script>
</html>