<!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>
|
