appcan實現下拉刷新,上拉加載更多。

<!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>
相關文章
相關標籤/搜索