借用插件实现,需要引入的文件(别忘引入jQuery文件,1.7版本以上的):
()

<link rel="stylesheet" href="dropload.css">
<script src="dropload.min.js"></script>

HTML代码:

<div class="content">
    <div class="lists"></div>
</div>

js代码

$('.aui-content').dropload({//.aui-content和下面的加载的数据(.aui-media-list)不能用同一个类名或同一个div
    scrollArea : window,
    autoLoad : false,//自动加载,否
    domDown : {//自定义下拉样式和刷新样式
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">&nbsp;</div>',
        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
        domNoData  : '<div class="dropload-noData">暂无数据</div>'
    },
    loadDownFn : function(me){//上拉加载
        var lastid = $('.aui-media-list li').last().attr('name');//记录最后一条的id,取比它大或者比它小的几条
        $.ajax({
            url:"{php echo $this->createMobileUrl('ajaxSearchNoticeList')}",
            data:'lastid=' + lastid,
            type:'POST',
            dataType:'HTML',
            success: function(data){
                //alert(data);
                if(data == 1){//判断是不是没有数据了
                    //me.lock();//锁定,锁定后,不能加载不能刷新
                    // 无数据
                    me.noData();//不让加载
                    // 每次数据加载完,必须重置
                    me.resetload();
                }else{
                    $('.aui-media-list').append(data);//就这个和初始对象不能一致
                    // 每次数据加载完,必须重置
                    me.resetload();
                }
            },
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加载出错,也得重置
                me.resetload();
            }
        });
    },
    loadUpFn : function(me){//下拉刷新
        $.ajax({
            url:"{php echo $this->createMobileUrl('ajaxSearchNoticeList')}",
            data:'refresh=yes',
            type:'POST',
            dataType:'HTML',
            success: function(data){
                $('.lists').html(data);
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
});

其余配置选项和说明见此链接:
下拉刷新、上拉加载更多 Zepto/jQuery插件;

标签: none

添加新评论