appcan实现下拉刷新，上拉加载更多。

来源：互联网发布：定位蜂窝移动网络搜索编辑：程序博客网时间：2024/05/22 00:36
因为最近接触hybird app项目，项目比较麻烦，做了一个多月了。今天发一个小文章，说说appcan实现下拉刷新，上拉加载的实现。
首先你要熟悉appcan相关API，然后了解回调需要的数据，相关的判断。
直接上代码吧，多多指教。
<!DOCTYPE html><htmlclass="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>
0 0