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

最新推荐文章于 2019-04-24 14:36:56 发布
波比小金刚
最新推荐文章于 2019-04-24 14:36:56 发布
阅读量6.2k
点赞数 1
分类专栏： andriod appcan
本文链接：https://blog.youkuaiyun.com/javaexploreroooo/article/details/51916040
版权
andriod 同时被 2 个专栏收录
3 篇文章
订阅专栏
appcan
2 篇文章
订阅专栏
因为最近接触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>