因为最近接触hybird app项目，项目比较麻烦，做了一个多月了。今天发一个小文章，说说appcan实现下拉刷新，上拉加载的实现。
首先你要熟悉appcan相关API，然后了解回调需要的数据，相关的判断。
直接上代码吧，多多指教。
<!DOCTYPE html>
<html
class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport"
content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet"
href="../../static/ui/css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="../../static/ui/css/ui-box.css">
<link rel="stylesheet" href="../../static/ui/css/ui-base.css">
<link rel="stylesheet" href="../../static/ui/css/ui-color.css">
<link rel="stylesheet" href="../../static/ui/css/appcan.icon.css">
<link rel="stylesheet" href="../../static/ui/css/appcan.control.css">
<link rel="stylesheet"
href="../../static/app/userappeal/user_appeal_content.css">
</head>
<body class="um-vp bc-bg" ontouchstart>
<div id="listview" style="padding-left: 0.75em;padding-right: 0.75em;"></div>
<script src="../../static/ui/js/appcan.js"></script>
<script src="../../static/ui/js/appcan.listview.js"></script>
<script src="../../static/ui/js/appcan.control.js"></script>
<script src="../../static/common/js/server.js"></script>
</body>
<script>
window.uexOnload = function(type) {
uexWindow.setBounce(1);
initBounce(mes, mes2);
}
function mes() {
loadDataFromServer(1);
}
function mes2() {
loadDataFromServer(nowindex);
}
function initBounce(funcTop, funcBottom) {
uexWindow.setBounce("1");
if (!funcTop && !funcBottom) {
uexWindow.showBounceView("0", "rgba(255,255,255,0)", "0");
uexWindow.showBounceView("1", "rgba(255,255,255,0)", "0");
return;
}
var top = 0, btm = 1;
uexWindow.onBounceStateChange = function(type, state) {
if (type == top && state == 2) { //顶部弹动
funcTop();
uexWindow.resetBounceView("0");
}
if (type == btm && state == 2) { //底部弹动
funcBottom();
uexWindow.resetBounceView("1");
}
}
if (funcTop) {
uexWindow
.setBounceParams(
'0',
"{'pullToReloadText':'下拉刷新','releaseToReloadText':'释放刷新','loadingText':'正在刷新，请稍候'}");
uexWindow.showBounceView(top, "rgba(255,255,255,0)", 1);
uexWindow.notifyBounceEvent(top, 1);
}
if (funcBottom) {
uexWindow
.setBounceParams(
'1',
"{'pullToReloadText':'加载更多','releaseToReloadText':'加载更多','loadingText':'加载中，请稍候'}");
uexWindow.showBounceView(btm, "rgba(255,255,255,0)", 1); //设置弹动位置及效果([1:显示内容;0:不显示])
uexWindow.notifyBounceEvent(btm, 1); //注册接收弹动事件([0:不接收onBounceStateChange方法回调;1:接收])
}
}
var lv = appcan.listview({
selector : "#listview",
type : "thickLineTmp",
hasIcon : false,
hasAngle : false,
hasSubTitle : false
});
lv.on('click', function(ele, context, obj, subobj) {
onRowclick(ele, context, obj, subobj);
})
var dCntACode = null;
var search_content = "";
var nowindex = 1;
var listdata = [];
var totalPage = 1;
var myScroll;
var fmTopic = null;
function loadDataFromServer(index) {
uexWindow.toast(1, 5, "正在加载中...", 0);
nowindex = index;
var user_appeal_item_codeKey = appcan.locStorage
.getVal("user_appeal_item_codeKey");
if (user_appeal_item_codeKey) {
dCntACode = user_appeal_item_codeKey;
}
fmTopic = appcan.locStorage.getVal("user_appeal_item_fmTopic");
var url = getAppealUrl("phone/appeal/i0013");
var param = {
"vo0013" : {
"dfmClaNo" : null,
"dCntACode" : dCntACode,
"fmTopic" : fmTopic,
"pageSize" : 15,
"order" : "1",
"currentPage" : index,
"deptID" : null,
"wsUserName" : null,
"wsPassword" : null,
"infCode" : null
}
};
appcan.ajax({
url : url,
type : 'POST',
data : param,
contentType : "application/json",
success : function(data) {
callback(eval("(" + data + ")"));
},
error : function(e) {
alert("请求失败，请检查您的网络！");
uexWindow.closeToast();
}
});
}
function callback(data) {
if (!data.error && (data.success != null && data.success == true)) {
//获取数据
data = data.data;
if (data == null || data == "") {
uexWindow.closeToast();
return;
}
//alert("nowindex:"+nowindex);
//获取总数
totalPage = data.totalPage;
if (totalPage == null) {
totalPage = 1;
}
nowindex = data.nowPage;
if (nowindex == null) {
nowindex = 1;
}
//转换数据
data = data.list;
//清空数据
if (nowindex == 1) {
listdata = [];
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
//判断数据是否为空
if (data == null || data.length == 0) {
listdata = [];
lv.set(listdata);
uexWindow.closeToast();
return;
}
//获取加载行
var morerow = null;
//如果还有更多数据，则生成加载行
//alert(totalPage+":"+nowindex);
if (totalPage > nowindex * 1) {
morerow = getMoreDataRow();
//若已无更多数据，且不是第一页，则提示已无更多数据
} else if (nowindex > 1) {
morerow = getMoreDataRow();
morerow.pkid = -99;
morerow.describe = '<div id="more_row" class="uinn-t t-a ulev" style="margin-right:10px;width:100%;text-align:center;color: #aaa9a9;">已无更多数据</div>';
}
for (var i = 0, len = data.length; i < len; i++) {
var rowdata = data[i];
listdata.push(addNewDataRow(rowdata));
}
if (morerow != null) {
listdata.push(morerow);
}
lv.set(listdata);
uexWindow.closeToast();
} else {
alert("获取数据失败");
}
}
function addNewDataRow(rowdata) {
var fromName = rowdata.fromName;
if (fromName) {
if (fromName.length > 1) {
fromName = fromName.substring(0, 1) + "**";
} else {
fromName = fromName + "**";
}
}
var fromTime = rowdata.fromTime;
if (fromTime) {
fromTime = fromTime.substring(0, 10);
}
var deptInfo = rowdata.DOverDeptName;
if (deptInfo) {
deptInfo = '处理单位：' + deptInfo + '>' + rowdata.DOverTime + '>';
} else {
deptInfo = '';
}
var row = {
title : '<span style="font-size:0.9em">' + rowdata.fmTopic
+ '</span>',
describe : '<div class="ub uinn-t t-a ulev-1">'
+ rowdata.dfmClaName + '/' + fromName + '/' + fromTime
+ '</div>'
+ '<div class="t-a ulev-1 uinn-t" style="color: #aaa9a9;">'
+ deptInfo + '<font style="color:#2481F8;">'
+ rowdata.crtStepName + '</font></div>',
pkid : rowdata.pkID,
wfid : rowdata.wfID
};
return row;
}
function getMoreDataRow() {
//获取列表数据最后一条，若为加载行，则直接返回
if (nowindex > 1) {
var last = listdata.pop();
if (last != null && last.pkid != -100) {
listdata.push(last);
} else {
return last;
}
}
//生成一个新的加载行，返回
var row = {
title : "",
describe : '<div id="more_row" class="uinn-t t-a ulev" style="margin-right:10px;width:100%;text-align:center;color: #aaa9a9;">点击加载更多</div>',
pkid : -100
};
return row;
}
function onRowclick(ele, context, obj, subobj) {
//alert(obj.html() + " id:" + context.pkid);
if (context == null || context.pkid == null || context.pkid == "") {
alert("选中行无效，请选择其他行数据");
} else {
if (context.pkid == -100) {
loadDataFromServer(parseInt(nowindex) + 1);
} else {
//alert("context.pkid:"+context.pkid+" wfid:"+context.wfid);
appcan.locStorage.setVal('user_appeal_detail_pkid',
context.pkid);
appcan.locStorage.setVal('user_appeal_detail_wfid',
context.wfid);
appcan.openWinWithUrl('user_appeal_detail',
'userAppeal_detail.html');
}
}
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
