移动端下拉分页加载插件dropload.js

时间：2017-07-21 17:22:02 收藏：0 阅读：8441

一、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();
                }
            });    
        }
    })  
}

这样就完美解决了安卓手机上的，第一次点击搜索不进行查询的问题。