标签：ade block aaaaa awr 点击 svg start 字段 下拉
本次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>
标签：ade block aaaaa awr 点击 svg start 字段 下拉
原文地址：http://www.cnblogs.com/A-QBlog/p/7068959.html
