下拉刷新

提示️

下拉刷新模块原版是不支持PC下拉的，本篇为了可以在PC上查看下拉刷新效果修改了源码做了兼容。

使用下拉刷新需要先载入一个CSS文件和一个JS文件：

<link rel="stylesheet" type="text/css" href="/static/auicss/css/aui-pull-refresh.css" />

<script src="/static/auicss/script/aui-pull-refresh.js"></script>

警告⚠️

aui-pull-refresh.css 文件中存在BUG，如果你的源码是从GitHub或者其它地方下载的原版v2.1，请自行将 aui-pull-refresh.css 文件中 background-image 值中的 fill="#707070" 删除。否则会造成下拉时动画效果不显示的BUG。

使用下拉刷新之前需要先实例化对象 var pullRefresh = new auiPullToRefresh(options, callback);，支持参数如下：

options 参数如下：

options: {
    container: '', // 需要下拉刷新的模块DOM对象
    triggerDistance: 100, // 下拉多少出发刷新
}

callback 回调参数如下：

function callback(res) {
    res.status // 固定值success
}

示例源码

<link rel="stylesheet" type="text/css" href="/static/auicss/css/aui-pull-refresh.css" />
<section class="aui-refresh-content">
    <div class="aui-content">
        <div id="demo">
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域，卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域，卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域，卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域，卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域，卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域，卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
            <div class="aui-card-list">
                <div class="aui-card-list-header">
                    卡片布局头部区域
                </div>
                <div class="aui-card-list-content-padded">
                    内容区域，卡片列表布局样式可以实现APP中常见的各类样式
                </div>
                <div class="aui-card-list-footer">
                    底部区域
                </div>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript" src="/static/auicss/script/aui-pull-refresh.js" ></script>
<script type="text/javascript">
    var pullRefresh = new auiPullToRefresh({
        container: document.querySelector('.aui-refresh-content'),
        triggerDistance: 100
    },function(ret){
        if(ret.status=="success"){
            setTimeout(function(){
                var wrap = document.getElementById("demo")
                var lis = wrap.querySelectorAll('.aui-card-list');
                for (var i = lis.length, length = i + 10; i < length; i++) {
                    var html = '<div class="aui-card-list">'+
                            '<div class="aui-card-list-header">'+
                            '卡片布局头部区域'+(i+1)+''+
                            '</div>'+
                            '<div class="aui-card-list-content-padded">'+
                            '内容区域，卡片列表布局样式可以实现APP中常见的各类样式'+
                            '</div>'+
                            '<div class="aui-card-list-footer">'+
                            '底部区域'+
                            '</div>'+
                            '</div>';
                    wrap.insertAdjacentHTML('afterbegin', html);
                }
                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
            },1500)
        }
    })
</script>