我在上拉加载中加入了判断:
mui('#content').pullRefresh().endPullupToRefresh((++cells.length > lists.length)); //参数为true代表没有更多数据了。
然后在下拉刷新中加入
mui('#content').pullRefresh().endPullupToRefresh(false);
取消“没有更多数据”的状态。
但是下拉刷新后,下拉加载没反应了。求助!
完整代码如下:
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css">
<style>
.lk {
color: #000000;
}
.mui-row.mui-fullscreen>[class*="mui-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-control-content {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
width: 100%;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
background-color: #fff;
}
.mui-badge {
font-size: 11;
font-weight: bold;
}
</style>
<script>
var arr = [{
"bizname": "采购订单",
"data": [{
"rownumber": 1,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026069",
"keyword": "采购订单送审",
"curusername": "白F,夏YL,龙K",
"curusercode": "0102541,0102346,0102620",
"pista": "运行中",
"actdt": "2016-10-19 17:16"
}, {
"rownumber": 2,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026066",
"keyword": "采购订单送审",
"curusername": "白F,夏YL,",
"curusercode": "0102346,0102541",
"pista": "运行中",
"actdt": "2016-10-18 19:51"
}, {
"rownumber": 3,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026065",
"keyword": "采购订单送审",
"curusername": "白F,夏YL,",
"curusercode": "0102346,0102541",
"pista": "运行中",
"actdt": "2016-10-18 11:27"
}, {
"rownumber": 4,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026047",
"keyword": "采购订单送审",
"curusername": "白F,夏YL,",
"curusercode": "0102346,0102541",
"pista": "运行中",
"actdt": "2016-09-22 14:19"
}, {
"rownumber": 5,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026042",
"keyword": "采购订单送审",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-09-22 13:01"
}, {
"rownumber": 6,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026041",
"keyword": "采购订单送审",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-09-22 13:01"
}, {
"rownumber": 7,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026040",
"keyword": "采购订单送审",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-09-22 13:01"
}, {
"rownumber": 8,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026039",
"keyword": "采购订单送审",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-09-22 13:00"
}, {
"rownumber": 9,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026038",
"keyword": "采购订单送审",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-09-22 13:00"
}, {
"rownumber": 10,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026037",
"keyword": "采购订单送审",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-09-22 12:59"
}, {
"rownumber": 11,
"flowtype": "af",
"bill_type": "PURS",
"bizname": "采购订单",
"piid": "0000026036",
"keyword": "采购订单送审",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-09-22 12:59"
}]
}, {
"bizname": "材料采购付款申请审批",
"data": [{
"rownumber": 12,
"flowtype": "af",
"bill_type": "PurchasePaymentOrderMain",
"bizname": "材料采购付款申请审批",
"piid": "0000025976",
"keyword": "1000028",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "运行中",
"actdt": "2016-06-23 09:13"
}, {
"rownumber": 13,
"flowtype": "af",
"bill_type": "PurchasePaymentOrderMain",
"bizname": "材料采购付款申请审批",
"piid": "0000025962",
"keyword": "1000021",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2016-06-22 15:10"
}, {
"rownumber": 14,
"flowtype": "af",
"bill_type": "PurchasePaymentOrderMain",
"bizname": "材料采购付款申请审批",
"piid": "0000025964",
"keyword": "1000022",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2016-06-14 09:23"
}, {
"rownumber": 15,
"flowtype": "af",
"bill_type": "PurchasePaymentOrderMain",
"bizname": "材料采购付款申请审批",
"piid": "0000025963",
"keyword": "775",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2016-06-14 08:48"
}]
}, {
"bizname": "DLLTest",
"data": [{
"rownumber": 16,
"flowtype": "af",
"bill_type": "DllTest",
"bizname": "DLLTest",
"piid": "0000025490",
"keyword": "夏YL发起的流程\n",
"curusername": "夏YL",
"curusercode": "0102346",
"pista": "终止",
"actdt": "2015-11-27 11:08"
}, {
"rownumber": 17,
"flowtype": "af",
"bill_type": "DllTest",
"bizname": "DLLTest",
"piid": "0000025489",
"keyword": "夏YL发起的流程\n",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-11-19 10:45"
}, {
"rownumber": 19,
"flowtype": "af",
"bill_type": "DllTest",
"bizname": "DLLTest",
"piid": "0000025484",
"keyword": "夏YL发起的流程\n",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-11-16 16:52"
}, {
"rownumber": 20,
"flowtype": "af",
"bill_type": "DllTest",
"bizname": "DLLTest",
"piid": "0000025483",
"keyword": "夏YL发起的流程\n",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-11-16 16:43"
}, {
"rownumber": 21,
"flowtype": "af",
"bill_type": "DllTest",
"bizname": "DLLTest",
"piid": "0000025482",
"keyword": "夏YL发起的流程\n",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-11-16 16:41"
}]
}, {
"bizname": "配方库审核",
"data": [{
"rownumber": 18,
"flowtype": "af",
"bill_type": "Recipe",
"bizname": "配方库审核",
"piid": "0000025488",
"keyword": "配方库:配方-测试1(XCY_TEST1)的审批",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-11-17 10:49"
}]
}, {
"bizname": "网站管理-新闻中心",
"data": [{
"rownumber": 22,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025457",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-10-14 14:42"
}, {
"rownumber": 23,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025454",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-10-14 14:41"
}, {
"rownumber": 24,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025389",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-08-11 11:48"
}, {
"rownumber": 25,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025305",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-07-28 14:30"
}, {
"rownumber": 26,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025304",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-07-28 11:46"
}, {
"rownumber": 27,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025303",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-07-28 11:32"
}, {
"rownumber": 28,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025302",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-07-28 10:25"
}, {
"rownumber": 29,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025301",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-07-28 10:24"
}, {
"rownumber": 30,
"flowtype": "af",
"bill_type": "ProjWebsiteNews",
"bizname": "网站管理-新闻中心",
"piid": "0000025299",
"keyword": "送审人:夏YL;任务描述:空",
"curusername": "",
"curusercode": "",
"pista": "结束",
"actdt": "2015-07-28 09:52"
}]
}]
</script>
</head>
<body youdao="bind">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">待办列表</h1>
</header>
<div class="mui-content mui-row mui-fullscreen">
<div class="mui-col-xs-3">
<div id="caption" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
</div>
</div>
<!--加载数据的容器:-->
<div id="content" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
<!--
<div id="content0" class="mui-control-content mui-active"><ul class="mui-table-view">
<li class="mui-table-view-cell">第0个选项卡子项-1</li>
</ul></div>
-->
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
var title = arr[0]["bizname"];
var lists = arr[0]["data"];
var caption = document.getElementById("caption");
var content = document.getElementById("content");
var html_caption = [];
var html_content = [];
var count = 11; //显示在标题上的总条目
var page; //内容列表的总页数
var page_num = 5; //内容列表每页显示的条数
if(lists.length % page_num == 0) {
page = (lists.length / page_num);
} else {
page = parseInt(lists.length / page_num) + 1;
}
html_caption.push('<a style="text-align: left;" class="mui-control-item" href="#content0"><span style="padding-left:5%;display:inline-block;width:75%">' + title + '</span><span class="mui-badge mui-badge-red" style="margin-right:5%;">' + count + '</span><span></span></a>');
html_content.push('<div id="content0" class="mui-control-content mui-active"><ul id="ul_content" class="mui-table-view"></ul></div>');
caption.innerHTML = html_caption.join('');
content.innerHTML = html_content.join('');
caption.querySelector('.mui-control-item').classList.add('mui-active');
mui.init({
//swipeBack: true //启用右滑关闭功能
pullRefresh: {
container: '#content',
down: {
callback: pulldownRefresh,
height: 0,
contentrefresh:'',
},
up: {
contentdown: '',
contentrefresh: '正在加载...',
callback: pullupRefresh,
}
}
});
mui.ready(function() {
mui('#content').pullRefresh().pullupLoading();
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var ul_content = document.getElementById('ul_content');
if(lists.length === 0) {
var li_list = document.createElement('li');
li_list.className = "mui-table-view-cell";
var A = document.createElement('p');
A.style.color = "red";
A.innerHTML = "您没有审批内容!";
ul_content.appendChild(li_list);
li_list.appendChild(A);
} else {
mui('#content').pullRefresh().endPullupToRefresh(false);
ul_content.innerHTML = '';
for(var i = 0; i < page_num && i < lists.length; i++) {
var keyword = lists[i]["keyword"];
var pista = lists[i]["pista"];
var actdt = lists[i]["actdt"];
var dt = actdt.substr(0, 10);
var content_list = '<span style="color: blue;font-size:12">' +
keyword +
'</span><span style="color :blue; margin-left: 5%;font-size:12">' +
pista +
'</span><span style="color: red;margin-left:5%;font-size:12">' +
dt +
'</span>';
var li_list = document.createElement('li');
li_list.className = "mui-table-view-cell";
var A = document.createElement('a');
A.className = "mui-navigate-right";
A.innerHTML = content_list;
li_list.appendChild(A);
ul_content.appendChild(li_list);
}
// mui('#content').pullRefresh().enablePullupToRefresh();
// mui('#content').pullRefresh().endPulldownToRefresh(3);
}
}, 1500);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui('#content').pullRefresh().endPullupToRefresh((++cells.length > lists.length)); //参数为true代表没有更多数据了。
//for (var i = cells.length, len = i + 20; i < len; i++) {
if(lists.length === 0) {
var ul_content = document.getElementById('ul_content');
var li_list = document.createElement('li');
li_list.className = "mui-table-view-cell";
var A = document.createElement('p');
A.style.color = "red";
A.innerHTML = "您没有审批内容!";
ul_content.appendChild(li_list);
li_list.appendChild(A);
} else {
for(var i = cells.length, len = i + page_num; i < len && i < lists.length; i++) {
var keyword = lists[i]["keyword"];
var pista = lists[i]["pista"];
var actdt = lists[i]["actdt"];
var dt = actdt.substr(0, 10);
var content_list = '<span style="color: blue;font-size:12">' +
keyword +
'</span><span style="color :blue; margin-left: 5%;font-size:12">' +
pista +
'</span><span style="color: red;margin-left:5%;font-size:12">' +
dt +
'</span>';
var ul_content = document.getElementById('ul_content');
var li_list = document.createElement('li');
li_list.className = "mui-table-view-cell";
var A = document.createElement('a');
A.className = "mui-navigate-right";
A.innerHTML = content_list;
ul_content.appendChild(li_list);
li_list.appendChild(A);
}
}
}, 1500);
}
</script>
</body>
</html>
0 个回复