| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 | <!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" src="../js/common.js"></script>		<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_pullcustom_content.html', 'webview_pullcustom_content', {		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');		},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>		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>		<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;">		<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>
 |