依赖
基于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)