setPullToRefresh( )

MUI HTML5

MUI

setPullToRefresh( )

设置Webview窗口的下拉刷新效果


void wobj.setPullToRefresh( style, refreshCB );
						

说明:

开启Webview窗口的下拉刷新功能,显示窗口内置的下拉刷新控件样式。

参数:

  • style: ( WebviewRefreshStyle ) 必选 Webview窗口下拉刷新样式参数
    可设置窗口内置的下拉刷新控件在各种状态显示的文字内容。
  • refreshCB: ( RefreshCallback ) 必选 Webview窗口下拉刷新事件回调
    用户操作窗口的下拉刷新触发窗口刷新事件时触发。

返回值:

void : 无

平台支持:

  • Android - 2.2+ (支持)
  • iOS - ALL (支持)

示例:


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