dropload插件--下拉刷新 上拉加载更多（JS实现移动端样式）
依赖
基于Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用）
功能
主要实现下拉刷新和上拉加载更多功能
github地址/下载地址
实践结果
$('.content').dropload({
scrollArea : window,
//下拉刷新功能
loadUpFn : function(me){
$.ajax({
type: 'GET',
url: 'json/more.json',
dataType: 'json',
success: function(data){
alert(data);
$('.list').html(data);
// 每次数据加载完，必须重置
me.resetload();
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
}
});注：使用dropload做下拉刷新时，dropload绑定的元素div.content需要跟包裹被刷新元素的元素div.list有层级关系,不能是同一级别的
<div class="content"> <!--下拉刷新出现的位置start--> <!--下拉刷新出现的位置end--> <div class="lists"></div> <div class="lists"></div> <div class="dropload-down"> <div class="dropload-refresh">↑上拉加载更多</div> </div> </div>
自己在实际项目中，用到了下拉刷新功能，有一个模块下拉刷新始终只能执行一次，之后都不起作用，但是其他用了相同插件的模块都是正常运行，排查半天，发现这个模块的元素层级不一样（dropload绑定的元素跟包裹被刷新元素的元素是同一个元素
div.content），修改了层级之后（添加元素），下拉刷新正常，附上源码<section class="tenementBox"> <ul class="tabHead" id="millia"> <li class="active">最美物业服务团队</li> <li>最美物业人</li> </ul> <ul class="tabBody" > <li class="thisclass"> <ul class="tenementList clearfix inner" id="content1"> </ul> </li> <li> <ul class="tenementList clearfix" id="content2"> </ul> </li> </ul> </section>
<script>
//企业
$(function(){
// 页数
var page = 0;
// dropload
$('#millia').dropload({
scrollArea: window,
domUp: {
domClass: 'dropload-up',
domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate: '<div class="dropload-update">↑释放更新</div>',
domLoad: '<div class="dropload-load">加载中...</div>'
},
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'GET',
url: "{:url('index/show/getlist')}?page="+page,
dataType: 'json',
success: function(data){
var arrLen = data.length;
var tenementList_w = $(".tenementBox .tabBody li").width();
var tenementList_li = tenementList_w * 0.48;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result += '<li>';
result += '<div class="pic" style="height:' + tenementList_li * 19 / 25 + 'px;">';
result += '<a href="{:url(\'index/show/detail\')}?id='+data[i].id+'">';
result += '<img id="imgInit" src="{$Think.config.systemConfig.domain}/public/static/pic/'+data[i].nid+'-01.png">';
result += '</a>';
result += '</div>';
result += '<h1>'+data[i].name+'</h1>';
result += '<p>'+data[i].num+'票<a href="{:url(\'index/show/detail\')}?id='+data[i].id+'" class="btn">查看</a></p>';
result += '</li>';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 插入数据到页面，放到最后面
$('#content1').append(result);
// 每次数据插入，必须重置
me.resetload();
},
error: function(xhr, type){
alert('网络异常');
// return false;
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
});
</script>附PHP代码，服务端请求数据：
public function getlist(){
if(request()->isGet()){
$limit = 20;
$page = request()->get('page',0);
$offset = ($page - 1) * $limit;
$user_mod = new model\ZuimeiwuyeUser();
//企业
$data = $user_mod->where('category',1)->order('num desc,id')->limit($offset,$limit)->select();
$json = json($data);
$json->send();
}
}
最新回复 (0)