首页 > 其他分享> > 25HUI - 下拉刷新（hui-loading-wrap）

25HUI - 下拉刷新（hui-loading-wrap）

2021-07-07 16:52:40 作者：互联网

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>

标签：loading,endRefresh,hui,refresh,刷新,wrap,加载
来源： https://blog.51cto.com/u_15294985/3004901