HUI 下拉刷新说明
需要引用 hui-refresh-load-more.js
<script src="js/hui-refresh-load-more.js" type="text/javascript" charset="utf-8"></script>
核心函数 hui.refresh(’#refreshContainer’, refresh, icon1, icon2, loading );
功能：实现下拉刷新。
参数：
1、refreshContainer ：刷新针对的核心 dom 元素（请使用id选择器）；
2、refresh ：刷新时执行的函数；
3、icon1 [ 可省参数 ]：默认值 : 继续下拉刷新"，修改此参数可以改变下拉过程中继续下拉的提示内容；
4、icon2 [ 可省参数 ]：默认值 : 释放立即刷新，"，修改此参数可以改变下拉过程中释放立即刷新的提示内容；
5、loading [ 可省参数 ]：默认值 :
<div class="hui-loading-wrap"><div class="hui-loading" style="margin:18px 5px 0px 0px;"></div><div class="hui-loading-text">加载中</div></div>
修改此参数可以改变加载中的动画效果；
总结：通过修改 3/4/5 3个参数可以完成自定义的下拉动画效果！
hui.endRefresh();
在刷新完成后使用 hui.endRefresh(); 函数结束刷新及其动画效果。
完整代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI </title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body background="#f4f5f6;">
<header class="hui-header">
<div id="hui-back"></div>
<h1>HUI 下拉刷新</h1>
</header>
<div class="hui-wrap">
<div id="refreshContainer" class="hui-refresh">
<!-- hui-refresh-icon 为下拉动画展示区域 -->
<div class="hui-refresh-icon"></div>
<div class="hui-refresh-content hui-list" id="list">
<!-- 内容展示区域 -->
</div>
</div>
</div>
<script type="text/javascript" src="../js/hui.js"></script>
<script src="../js/hui-refresh-load-more.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui.refresh('#refreshContainer', refresh);
function refresh(){
if(hui.refreshNumber < 1){hui.loading('加载中...');}
hui.get(
'http://hoa.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page=1',
function(res){
var data = res.split('--hcSplitor--');
var html = '';
for(var i = 0; i < data.length; i++){
html += '<a href="javascript:hui.toast(\'hi.....\');"><div class="hui-list-text">'+data[i]+'</div></a>';
}
hui('#list').html(html);
hui.endRefresh();
//关闭loading
hui.loading('加载中...', true);
},
function(){
hui.loading('加载中...', true);
hui.toast('连接服务器失败！');
hui.endRefresh();
}
);
}
</script>
</body>
</html>