zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!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>下拉刷新</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
var ws=null;
var list=null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady(){
	ws=plus.webview.currentWebview();
	ws.setStyle({pullToRefresh: {
		support: true,
		style: (plus.os.name=='iOS')?'default':'circle'
	}});
	ws.addEventListener('pullToRefresh', onRefresh, false);
	//ws.setPullToRefresh({support:true,style:'circle'}, onRefresh);	// 通过方法设置下拉刷新 
	// 第一次打开页面即开始刷新列表
	setTimeout(function(){
		console.log('Initializ refresh');
		ws.beginPullToRefresh();
	}, 200);
}
// 判断扩展API是否准备，否则监听'plusready'事件
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// DOM构建完成获取列表元素
document.addEventListener('DOMContentLoaded', function(){
	list=document.getElementById('list');
	var offset=document.getElementById('offset');
	offset&&(offset.style.height=topoffset+44+'px');
});
// 刷新页面
function onRefresh(){
	setTimeout(function(){
		if(list){
			var item=document.createElement('li');
			item.innerHTML='<span>New Item '+(new Date())+'</span>';
			list.insertBefore(item,list.firstChild);
		}
		ws.endPullToRefresh();
	},1000);
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
li {
	padding: 1em;
	border-bottom: 1px solid #eaeaea;
}
li:active {
	background: #f4f4f4;
}
		</style>
	</head>
	<body>
		<ul id="list" style="list-style:none;margin:0;padding:0;">
			<li><span>Initializ List Item 1</span></li>
			<li><span>Initializ List Item 2</span></li>
			<li><span>Initializ List Item 3</span></li>
			<li><span>Initializ List Item 4</span></li>
			<li><span>Initializ List Item 5</span></li>
			<li><span>Initializ List Item 6</span></li>
			<li><span>Initializ List Item 7</span></li>
			<li><span>Initializ List Item 8</span></li>
			<li><span>Initializ List Item 9</span></li>
			<li><span>Initializ List Item 10</span></li>
		</ul>
	</body>
</html>