直接上代码~
网页:
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll" >
<ul class="mui-table-view" id="vue">
<div class="noTip" v-show="arrayList.length==0">暂无记录~</div>
<li v-for="item in arrayList" class="mui-table-view-cell mui-media" @click="goDetail(item.wasteNum)">
<div class="mui-pull-right img_box">
<img :src="item.wastePhoto" />
</div>
<div class="mui-media-body">
<p class="mui-ellipsis">废弃物编号:{{item.wasteNum}}</p>
<p class="mui-ellipsis">废弃物来源:{{item.hospitalName}}</p>
<p class="mui-ellipsis">打包日期:{{item.wastePackTime}}</p>
</div>
</li>
</ul>
</div>
</div>
JavScript:
mui("#pullrefresh").on('tap', 'li', function (event) {
this.click();
}); //这个是为了解决mui-scroll中绑定vue点击事件无效
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
style:'circle',
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var data= {
"type":"1", //上拉请求
"pageNo":"0",
"wasteState":wasteStat
}
var success=function(data){
if(data.code==1){
vue.arrayList = data.result;
}else{
mui.toast(data.message)
}
// return callback();
}
var error = function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
app.myajax("appWeb/listWaste",app.getToken(),data,'post',success,error);
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
mui.toast('下拉刷新成功');
}, 1000);
}
var pageNo = 0; //页数
/**
* 上拉加载具体业务实现
*/
var flag=0; //是否无数据
function pullupRefresh() {
if(flag==1){
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);//参数为true代表没有更多数据了
return;
}
setTimeout(function() {
var data= {
"type":"2", //下拉加载更多
"pageNo":(++pageNo).toString(),
"wasteState":wasteStat
}
var success=function(data){
if(data.code==1){
vue.arrayList= vue.arrayList.concat(data.result); //将获取的json数组和当前的进行拼接
if(data.result.length<10) { //如果返回数据不足10条,后台Limit为10,即表示没有更多数据
flag = 1
}
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
}else{
mui.toast(data.message)
}
// return callback();
}
var error = function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
app.myajax("appWeb/listWaste",app.getToken(),data,'post',success,error);
}, 1000);
}