JS实现移动端下拉刷新更多分页请求功能方法2.0 / 憋错料

本次2.0升级版为js实现移动端加载更多下拉刷新更多分页请求功能方法（数据一次请求，前端分页，适用于数据流量较少，数据量压力小的页面）同时新增loading组件，turnToTop组件。

本文原创非转载，如需转载请注明出处：http://www.cnblogs.com/A-QBlog/p/7068959.html

废话不多说，直接上代码：

  1 ;(function (w, $) {
  2
  3     var loadmore = {
  4         /*单页加载更多 通用方法
  5          *
  6          * @param callback 回调方法
  7          * @param config 自定义参数
  8          * @param success 自定义ajax成功时处理函数
  9          * */
 10         setLoadMore: function (callback, config, success) {
 11
 12             $(window).unbind(‘scroll‘);//停止当前页面滚动监听事件
 13             /*****************************************默认配置域***************************************************/
 14             var config = config ? config : {};//防止未传参数报错
 15             var counter = 0;//计数器起始页号
 16             var pageStart = 0;//当前页起始页标
 17             var pageSize = config.size ? config.size : 10;//每页个数，默认10
 18             config.click = config.click ? config.click : false;//是否支持点击加载
 19             config.scroll = config.scroll ? config.scroll : true;//是否支持滚动加载
 20             var limitH = config.limitH ? config.limitH : 100;//滚动至距底端指定距离内加载，默认100px
 21             var btnID = config.btnID ? config.btnID : ‘btn-load-more‘;//可选，点击页面底部的加载更多按钮加载更多，与滚动互斥
 22             var divID = config.divID ? config.divID : ‘div-load-more‘;//内容条目父级承载默认id
 23             var jsonArr = config.jsonArr ? config.jsonArr : {};//防止未传参数报错
 24             /*****************************************默认配置域***************************************************/
 25             //通过点击加载更多,可选支持
 26             if (config.click) {
 27                 $(document).one(‘click‘, ‘#‘ + btnID, function () {
 28                     counter++;
 29                     pageStart = counter * pageSize;
 30                     callback && callback(config, pageStart, pageSize, success, jsonArr);
 31                 });
 32             } else
 33                 $(‘#‘ + config.btnID).remove();
 34
 35             config.isEnd = false;//滚动事件是否结束
 36
 37             config.isAjax = false;//防止滚动过快，服务端没来得及响应/DOM没来得及渲染造成多次请求
 38
 39             config.toTop = false;//返回顶部插件是否启用
 40             if ($("meta[name=toTop]").attr("content") == "true") {//如果启用
 41                 //启用方式 页面meta块最后添加：<meta name="toTop" content="true">
 42                 config.toTop = true;
 43                 $(‘<div id="toTop"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADyElEQVRoQ82a/1HbMBTH9aQBoBvABI15/p8wAbABnaDdoGSCphNAJyidgPB/dKYTNEzQMICs3teVfI7j35YDuuOOS2LpffSe3i+ZxAQjSZJja+1HPzURvUZR9DzBUoLGTgphjTGXRDS31s6IaNYw59Za+0xEK/ydnZ09jV1/MECSJJfGmBsiuhohxEYI8SCl/B5FEf7vPXoDrNfrKyL6JoQ46b1a8wP3UspFX5DOAEmSnBhj7mAqgQUvTrcVQiyZedF1jU4AWusbIQR2/bjrxGN+Z61dKaWuoygCUONoBdBa3wkhAHDosZVSXrR5r0aANxTeb1YrRC3AOxC+E0QlgNb6i7P5Q5tN3XrQxGnVmdgDSJJklqZp8l4k93LgYMdxfFGWawcAUdUJH9rHh9qPBTPfFifbAdBa48uvoVabYB6YUlQMdjkAAlWapn8mWDTolNbaH3Ec5249Bwi9+9baX0qppTEGwe+eiI5CkbgDneVORYC/oSJteZfgGIwxyEBDQXxnZnjK/wAuVUDEHT3KwvsJA0NsmPk0B1iv1w9EdDlW+jrhp4BwacbKa2C0+bQJPwFE5lIpROCqsnkI7BMxrfVSSnnrI2kgc3pi5jmNtf8q4dM0fZRSIh1euTO2stYeKaWQXWYpcgCILTN/AMDg4FUnPLyZt1EPIIQ4Rz0cEkJKORygSXgIXQWAz0NCYA0a6IFemDnPl9w5eizGkTqAKghXZ//s6wUzAK017PS858O5H64SvkkDhewyN6exAEshxOeeADAFRFY0q7KIWB5NGij8NmuruJK1d73tNTD4EDdBdwTou287v0dOBBOapPo6BAAzEwLZHH571FYMN6Exy/5m5hkAUIUhlQg6ptaAd+M+F8JhzLvJIUimBhBCfGLmew8wyBO95SH2RU0GMEU5OaUGUO3FcZx1xYsV2ZCAVquEKQG8+ewAhPZG1trrOI4RpFDxhdycnTSm3FYJtpBP2oQQaJSFdNPZ4fWqLze23mVXrmCnWRFTtNu91iKqpyG5UQjX2zSHtfZVKTUvt9vrmrvB40IAwB3TqTQh/6G7edwE7OOMkr+pYVB7PxCgZh0ltH+4rdvReEPz1hBtwu/EgbrtclEa/jxortRBPXut9KpnWi/5/EMH9E4vUsob35JpA+0M4HImxAkEkam0sZBSLrtcrzZ6oTZql3agFO3bDNibGv4ddbFSCp273q8b9NJAeXV3PlCSIjp21ooTGk0BvCfx0GfHyzKMAihOhtjh8p4s1Ls3V3ynAYERLcWNlPK57fK6zQKK3/8D7aBzDaxp8f0AAAAASUVORK5CYII=" ></div>‘).appendTo(‘body‘);
 44
 45                 $("#toTop").css({
 46                     width: ‘48px‘,
 47                     height: ‘48px‘,
 48                     bottom: ‘2.5rem‘,
 49                     right: ‘2.5rem‘,
 50                     position: ‘fixed‘,
 51                     cursor: ‘pointer‘,
 52                     zIndex: ‘9999‘,
 53                     display: ‘none‘
 54                 });
 55                 if ($(this).scrollTop() == 0) {//未滚动
 56                     $("#toTop").hide();
 57                 }
 58             }
 59
 60             //通过自动监听滚动事件加载更多,可选支持
 61             $(window).scroll(function () {
 62
 63                 if (!config.scroll) {//是否开启滚动加载
 64                     return;
 65                 }
 66
 67                 /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
 68                 if (config.isEnd == true || config.isAjax == true) {
 69                     return;
 70                 }
 71
 72                 if (config.toTop) {
 73                     if ($(this).scrollTop() == 0) {
 74                         $("#toTop").fadeOut();
 75                     } else {
 76                         $("#toTop").fadeIn();
 77                     }
 78                 }
 79
 80                 /*当滚动到最底部以上指定像素时， 加载新内容*/
 81                 if ($(document).height() - $(this).scrollTop() - $(this).height() < limitH) {
 82                     counter++;
 83                     pageStart = counter * pageSize;
 84
 85                     callback && callback(config, pageStart, pageSize, success, jsonArr);
 86                 }
 87             });
 88             if (config.toTop) {
 89                 $(document).on(‘click‘, ‘#toTop‘, function () {
 90                     $(‘html,body‘).animate({
 91                         scrollTop: "0px"
 92                     }, 500);
 93                 });
 94             }
 95
 96             /*第一次自动加载*/
 97             callback && callback(config, pageStart, pageSize, success, jsonArr);
 98         }
 99     };
100     $.loadmore = loadmore;
101 })(window, window.jQuery);

回调函数：

function setLoadMoreData(config, pageStart, pageSize, success, jsonArr) {
    config.isAjax = true;
    var sum = jsonArr.length;//数据总长度

    /************业务逻辑块：传入自定义回调函数实现拼接html内容到页面*****************/
    if (sum - pageStart < pageSize) {//如果最后一页内容个数小于单页个数配置
        pageSize = sum - pageStart;
    }
    var tempJsonArr = [];
    for (var i = 0; i < pageSize; i++) {
        tempJsonArr.push(jsonArr[pageStart + i]);
    }
    success && success(tempJsonArr);
    /*******************************************/

    /*隐藏点击加载按钮*/
    if ((pageStart + pageSize) >= sum) {
        config.isEnd = true;
        /*停止滚动加载请求*/
        //提示没有了

        if (config.click) {
            $(‘#‘ + config.btnID).hide();
        }
    } else {
        if (config.click) {
            $(‘#‘ + config.btnID).show();
        }
    }

    config.isAjax = false;
    // });

}

调用方法：

function SearchFun() {

        $(‘#loading‘).show();

        var jsonArr = ajax同步获取data;
        //OR
        //异步function(jsonArr){
        $(‘#loading‘).hide();
        $.loadmore.setLoadMore(setLoadMoreData, {
            size: 8, //每页显示个数，默认是10
            jsonArr: jsonArr, //结果集排序字段，不能为空
            divID: ‘panel-div‘,//内容承载div id，默认为div-load-more
            limitH: 25//加载条件，滚动条距离页面底端距离，默认为100
        }, SucceedFun);
        //}
        function SucceedFun(data) {
            each()
            {
                append();
            }
        }
    }

加载中界面实现：

<div id="loading" style="display: none">
        <div class="loadmore"><i class="loading"></i><span class="loadmore-tips">正在努力加载中...</span></div>
    </div>

style：

<style>
    .loadmore {
        font-size: 14px;
        line-height: 1.6em;
        margin: 1.5em auto;
        text-align: center;
        width: 65%;
    }

    .loadmore-tips {
        display: inline-block;
        vertical-align: middle;
    }

    .loadmore-tips {
        padding: 0 0.16em;
    }

    .loading {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        -webkit-animation: Loading 1s steps(12, end) infinite;
        animation: Loading 1s steps(12, end) infinite;
        background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
        background-size: 100%;
    }

    @-webkit-keyframes Loading {
        0% {
            -webkit-transform: rotate3d(0, 0, 1, 0deg);
        }
        100% {
            -webkit-transform: rotate3d(0, 0, 1, 360deg);
        }
    }

    @keyframes Loading {
        0% {
            -webkit-transform: rotate3d(0, 0, 1, 0deg);
        }
        100% {
            -webkit-transform: rotate3d(0, 0, 1, 360deg);
        }
    }
</style>

时间： 2024-07-29 19:22:58

JS实现移动端下拉刷新更多分页请求功能方法2.0

JS实现移动端下拉刷新更多分页请求功能方法2.0的相关文章

原生js实现简单的下拉刷新功能

移动端下拉刷新原理和实例

原生js手机端触摸下拉刷新

Android 博客园客户端（八）下拉刷新、分页，AsyncTask

移动端下拉刷新,iScroll.js用法(转载)

ios 11 12以后下拉刷新不回位的解决方法

自定义ListView_下拉刷新上拉加载更多

自己封装的工具类，使用原生SwipeRefreshLayout+RecycleView实现下拉刷新和加载更多

Android实现ListView下拉刷新和上拉加载更多的思路