加入下拉刷新后，原本要下拉返回窗口顶部的直接就开始执行下拉刷新了，正确的应该是要下拉先回到顶部再开始刷新
http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewPullToRefreshStyles
<!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>Webview Example</title>
<script type="text/javascript" charset="utf-8">
var ws=null;
var list=null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady(){
ws=plus.webview.currentWebview();
ws.setPullToRefresh({support:true,
height:'50px',
range:'200px',
contentdown:{
caption:'下拉可以刷新'
},
contentover:{
caption:'释放立即刷新'
},
contentrefresh:{
caption:'正在刷新...'
}
},onRefresh);
plus.nativeUI.toast('下拉可以刷新');
}
// 判断扩展API是否准备，否则监听'plusready'事件
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
// DOM构建完成获取列表元素
document.addEventListener('DOMContentLoaded', function(){
list=document.getElementById('list');
})
// 刷新页面
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();
},2000);
}
</script>
<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>
0 个回复