html5+ 下拉刷新

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>

		<script type="text/javascript" charset="utf-8">
			var ws = null,
				list = null;
			// 扩展API加载完毕，现在可以正常调用扩展API 
			function plusReady() {
				ws = plus.webview.currentWebview();
				wo = ws.opener();
				var topoffset = '45px';
				if (plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
				}
				list = plus.webview.create("webview_pullrefresh_custom.html", "webview_pullrefresh_custom.html", {
					top: topoffset,
					bottom: "0px",
					bounce: "vertical"
				});
				ws.append(list);
				ws.addEventListener("show", function () {
					refresh();
				}, false);
				if (!ws.preate) {
					list.addEventListener("loaded", function () { //叶面加载完成后才显示
						ws.show("pop-in");
						wo.evalJS("closeWaiting()");
					}, false);
				}
				ws.append(list);
				// 实现列表可下拉刷新
				list.addEventListener("dragBounce", onPullStateChange, false);
				list.setBounce({
					position: {
						top: "100px"
					},
					changeoffset: {
						top: "50px"
					}
				});
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// DOMContentLoaded事件处理
			var etext = null,
				eicon = null;
			document.addEventListener("DOMContentLoaded", function () {
				etext = document.getElementById("text");
				eicon = document.getElementById("icon");
			}, false);

			// 下拉状态改变
			function onPullStateChange(e) {
				switch (e.status) {
					case "beforeChangeOffset": //下拉可刷新状态
						pull1();
						break;
					case "afterChangeOffset": //松开可刷新状态
						pull2();
						break;
					case "dragEndAfterChangeOffset": //正在刷新状态
						list.evalJS("onRefresh();");
						pull3();
						break;
					default:
						break;
				}
			}

			function pull1() {
				etext.textContent = "下拉可刷新";
				eicon.style.webkitTransition = "all 0.3s ease-in";
				eicon.style.webkitTransform = "rotate(0deg)";
			}

			function pull2() {
				etext.textContent = "松开可刷新";
				eicon.style.webkitTransition = "all 0.3s ease-in";
				eicon.style.webkitTransform = "rotate(180deg)";
			}

			function pull3() {
				etext.textContent = "正在刷新...";
				eicon.src = "../img/pull_fresh.png";
				eicon.style.webkitAnimation = "spin 1s infinite linear";
			}

			function pullReset() {
				etext.textContent = "下拉可刷新";
				eicon.src = "../img/pull_arrow.png";
				eicon.style.webkitTransition = "";
				eicon.style.webkitTransform = "";
				eicon.style.webkitAnimation = "";
			}

			function refresh() {
				pull3();
				list.setBounce({
					offset: {
						top: "50px"
					}
				});
			}

		</script>

		<style type="text/css">
			#pull {
				width: 24px;
				height: 100%;
				display: inline-block;
				margin: 0 1em;
			}

			#icon {
				height: 24px;
				vertical-align: middle;
			}

			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}

				100% {
					-webkit-transform: rotate(360deg);
				}
			}

			.irefresh {
				background: no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMTAvMTUgEQA0AAAEP0lEQVR4nO3aTWhcVRTA8f+NQ6ImLqsu7MLuSiOt74SOoJBYDCp0UdG1BUVdWFBR/CiCLqzaClWhLlQUiqCIHwh1EUFqRyshMudRcVRcWdBFsZCVNQzEXhcz1ZeXaTOdN9N3Jp7f7t3J3JzmD52XvBtijDg7RsoewK3kQYzxIMZ4EGM8iDEexBgPYowHMcaDGONBjPEgxngQYzyIMR7EGA9ijAcxxoMY40GM8SDGeBBjPIgxHsQYD2KMBzHGgxjjQYzxIMZUyh6gF/V6fWsIYQa4A9gCbGy/9BvwIzAXYzw2NTX1fTf7qerDIvLGQIa9SGFYDls3Go2RZrO5C9gNbAeuXeMtp4DvgMNjY2OfTU5Onu30Rar6OPC8iFzV14F7NBRBVHUHcACQXrcAnhSRo7l9HwVeBRCRUGjIPjEdpFarhYmJiX3AM33a8qXFxcW9s7OzK2KAB1mTqo4C7wN3d3h5CfgSOA6cAP5or18NbANuAW4Drujw3neBBnAwu+hBLkBVLwM+ZHWMJeC1EMLbSZL8eqE90jS9Psb4APAYcPla39NKEKt3WS+wOoaGEB5MkiTtZoN2sL2q+inwFnBjn2ccCHO/h6jqNPB0bvkYMNNtjCwRqQM30bolNs9UkIWFhQrwem45BXaKyJ8Ftn4OuKbA+y8ZU/9lVSqVncDWzNJfwG4ROdPrnqr6CvBE0dkuFVNBgPtz14dEpNHrZqp6kNaH+tAwE6Rer28OIVQzS2dCCId62UtVR4B9tGL8Ddi7lTwPM0FCCLcDGzJLR5Mk6fWD+CzwJq3Po6GJAYaCxBjvDGHFrwK1XvcSEYCTBUcqhZm7rBDC5tz1D2XNUiYzQfjvT+gAxBhPlTVImSwFcdgK8nv2IoSw1vOOdclMkBjjT7nrG8qapUxmgoQQ5nJL06UMUjIzQYA54HTmekeaphvP98XrlZkgIvIzsJBZGo8x7ilrnrKYCdL2Tu56j6pOljJJSUwFWV5e/hzIHt25EjisquNF907TdGx+ft7Uv7cTUwNWq9Vl4JHccgIcKRJFVcdjjLXR0dFPGo3GaKEhB8xUEAARqQEv55ZvBWqqmlzsfqoqtA5DVIFdzWbzC1XdVHzSwTAXpO1Z4OPcmgDHVXV/Nz9QVd2kqvuBb2idRDlnBnioX4P2m8lTJwCqWgE+AO7p8PIS8BXwdQghjTGeBgghbIgxbgdupvWD73QM6CPgvoKPhAfGbBAAVQ3Ai6w+9NCrAyLyVJ/2GgjTQc4Z1FFSi4YiCPz7WPYu4F66P2z9LfAecEREOh62tmZogmSp6jZguv2UcQtwHa1HtSeBX2j9GaYmIifKm7I3QxlkPbN62/u/5UGM8SDGeBBjPIgxHsQYD2KMBzHGgxjjQYzxIMZ4EGM8iDEexBgPYowHMcaDGONBjPEgxngQYzyIMR7EGA9ijAcxxoMY40GM8SDG/AOZAi+0sACgewAAAABJRU5ErkJggg==);
				background-size: 50px 44px;
			}

		</style>
	</head>

	<body style="background:#EAEAEA;">
		<header id="header" style="position:static">
			<div class="nvbt iback" onclick="back();"></div>
			<div class="nvtt">自定义下拉刷新</div>
			<div class="nvbt irefresh" onclick="refresh()"></div>
		</header>
		<div style="text-align:center;height:44px;line-height:44px;">
			<div id="pull"><img id="icon" src="../img/pull_arrow.png" /></div>
			<font id="text">下拉可刷新</font>
		</div>
	</body>

</html>
wlor
发布了33 篇原创文章 · 获赞 6 · 访问量 2万+
私信关注
猜你喜欢
