下拉刷新

参考《JS组件-aui-pull-refresh》 使用方法

<link rel="stylesheet" type="text/css" href="../../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 src="../../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>