移动端下拉分页加载插件dropload.js
一、dropload.js下载地址:
http://www.jq22.com/jquery-info6960
该地址有dropload.js的基础说明文档,下载的压缩包有相应的demo
二、依赖
Zepto 或者 jQuery 1.7以上版本,推荐jQuery 2.x版本(二者不要同时引用)
Zepto or jQuery 1.7+,recommend to use jQuery 2.x(not use them at the same time)
三、bug及解决方案
1.小屏手机不加载问题
方案:将源文件的distance(拉动距离)参数改成2000;
1.模糊查询,点击完搜索按钮,因上拉事件无法触发,进到页面就没有数据问题。
一般来说,dropload的加载是没有问题,但是,需求往往不是服务端一次性返回所有数据,往往还要支持服务端分页,搜索,排序,多条件筛选等功能。分页问题就不必说了,dropload本身的意义就是分页加载
前段时间,在使用dropload进行条件查询时,遇到了这个问题。
方案:dropload本身的思想就是一次向服务器请求一页数据(条数自定义)。这样每次只请求需要的几条数据,减少了服务器响应时间。
而解决这个问题的思想就在于分步加载,第一步,不利用dropload进行ajax请求第一页数据,剩余页使用dropload请求
改进代码如下:
function selectMore(el){ var pageNum = 1; // 每页展示6个 var pageSize = 6; var keyword = $(".search input").val(); var id = getUrlParam("id"); el.find($('.lists')).html(""); $('.dropload-down').remove(); var result = ''; $.ajax({ type: "post", url: BasicPath.URL + InterFaceJson.pageSelect, async:true, data:{ pageSize: pageSize, pageNum: pageNum, categoryID: id, pattern: keyword }, success: function(res){ var lists = res.data.list; var arrLen = lists.length; for(var i = 0; i < arrLen; i++){ result += '';//html模板,你懂得 } setTimeout(function(){ // 插入数据到页面,放到最后面 el.find($(".lists")).append(result); },500); if(arrLen<6){ $(".dropload-refresh").html('没有更多内容了'); } } }) self.moreFund = el.dropload({ scrollArea : window, domDown:{ domClass:'dropload-down', domRefresh:'<div class="dropload-refresh">↑上拉加载更多</div>', domLoad:'<div class="dropload-load">正在加载中</div>', domNoData:'<div class="dropload-noData">没有更多内容了</div>' }, distance: 2000, loadDownFn : function(me){ pageNum++; var result = ''; $.ajax({ type: "post", url: BasicPath.URL + InterFaceJson.pageSelect, async:true, data:{ pageSize: pageSize, pageNum: pageNum, categoryID: id, pattern: keyword }, success: function(res){ var lists = res.data.list; var arrLen = lists.length; if( arrLen>0 ){ for(var i = 0; i < arrLen; i++){ result += '';//html模板,你懂得 }; }else{ // 锁定 me.lock(); // 无数据 me.noData(); } setTimeout(function(){ // 插入数据到页面,放到最后面 el.find($(".lists")).append(result); // 每次数据插入,必须重置 me.resetload(); },500); }, error: function(xhr, type){ alert('Ajax error!'); // 即使加载出错,也得重置 me.resetload(); } }); } }) }
这样就完美解决了安卓手机上的,第一次点击搜索不进行查询的问题。