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>
