JS實現移動端下拉刷新更多分頁請求功能方法2.0

本文轉載自查看原文 2017-06-23 11:14 3988 分頁處理/ js/ 下拉加載更多

本次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=" alt=""></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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。