上拉加载,下拉刷新
借用插件实现,需要引入的文件(别忘引入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"> </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插件;