码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-07-21 17:22:02      阅读:7201      评论:0      收藏:0      [点我收藏+]

标签:推荐   else   上拉加载更多   key   移动   com   err   pat   一般来说   

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

 

 

 

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

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

标签:推荐   else   上拉加载更多   key   移动   com   err   pat   一般来说   

原文地址:http://www.cnblogs.com/grove009/p/7218195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!