项目的一个前端页面展示已购买商品时，要求能下拉加载更多。关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。
但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。
h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。
基于按钮实现加载更多
最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，隐藏加载更多按钮。
效果如下：
页面html：
<div> <div> <div>文章列表</div> <div> </div> </div> <> <div>加载更多</div> </div> <script src="js/zepto.min.js"></script>
加载更多按钮样式：loadmore.css:
@charset "utf-8"; .js-load-more{ padding:0 15px; width:120px; height:30px; background-color:#D31733; color:#fff; line-height:30px; text-align:center; border-radius:5px; margin:20px auto; border:0 none; font-size:16px; display:none;/*默认不显示，ajax调用成功后才决定显示与否*/ }
加载更多的js代码：
$(function(){ /*初始化*/ var counter = 0; /*计数器*/ var pageStart = 0; /*offset*/ var pageSize = 4; /*size*/ /*首次加载*/ getData(pageStart, pageSize); /*监听加载更多*/ $(document).on('click', '.js-load-more', function(){ counter ++; pageStart = counter * pageSize; getData(pageStart, pageSize); }); });
这里的代码并不多。其中getData(pageStart, pageSize)是业务逻辑代码，负责从服务端拉去数据。这里给个示例：
function getData(offset,size){ $.ajax({ type: 'GET', url: 'json/blog.json', dataType: 'json', success: function(reponse){ var data = reponse.list; var sum = reponse.list.length; var result = ''; /****业务逻辑块：实现拼接html内容并append到页面*********/ //console.log(offset , size, sum); /*如果剩下的记录数不够分页，就让分页数取剩下的记录数 * 例如分页数是5，只剩2条，则只取2条 * * 实际MySQL查询时不写这个不会有问题 */ if(sum - offset < size ){ size = sum - offset; } /*使用for循环模拟SQL里的limit(offset,size)*/ for(var i=offset; i< (offset+size); i++){ result +='<div>'+ '<a href="'+ data[i].url +'" target="_blank"><h4>'+ data[i].title +'</h4></a>'+ '<p>'+ data[i].desc +'</p>'+ '</div>'; } $('.js-blog-list').append(result); /*******************************************/ /*隐藏more按钮*/ if ( (offset + size) >= sum){ $(".js-load-more").hide(); }else{ $(".js-load-more").show(); } }, error: function(xhr, type){ alert('Ajax error!'); } }); }
还是比较简单的。
基于滚动事件实现加载更多
上面我们通过按钮点击实现加载更多，整体过程还是比较简单的。这里，我提供另一种方法实现加载更多：基于于滚动(scroll)事件。
直接贴代码了：
$(function(){ /*初始化*/ var counter = 0; /*计数器*/ var pageStart = 0; /*offset*/ var pageSize = 7; /*size*/ var isEnd = false;/*结束标志*/ /*首次加载*/ getData(pageStart, pageSize); /*监听加载更多*/ $(window).scroll(function(){ if(isEnd == true){ return; } // 当滚动到最底部以上100像素时， 加载新内容 // 核心代码 if ($(document).height() - $(this).scrollTop() - $(this).height()<100){ counter ++; pageStart = counter * pageSize; getData(pageStart, pageSize); } }); });
可以看出，代码变化不大，主要看核心代码里的判断条件：当滚动到最底部以上100像素时， 加载新内容。
业务逻辑getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的逻辑改成：
if ( (offset + size) >= sum){ isEnd = true;//没有更多了 }
就行了。
当然，这里面还有要优化的地方，例如：如何防止滚动过快，服务端没来得及响应造成多次请求？
综合实例
通过上面的例子，显然第二种更好，不用去点击。但是第二个方法有个问题：
如果设置页面大小每次显示2条或3条(size=2)，总记录是20，你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。
因此，我们可以把以上两种方法合在一起：
默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。
这里，我对加载更多这个行为进行简单的抽象，写了个简单的插件：
loadmore.js
/* * loadmore.js * 加载更多 * * @time 2016-4-18 17:40:25 * @author 飞鸿影~ * @email jiancaigege@163.com * 可以传的参数默认有：size,scroll 可以自定义 * */ ;(function(w,$){ var loadmore = { /*单页加载更多 通用方法 * * @param callback 回调方法 * @param config 自定义参数 * */ get : function(callback, config){ var config = config ? config : {}; /*防止未传参数报错*/ var counter = 0; /*计数器*/ var pageStart = 0; var pageSize = config.size ? config.size : 10; /*默认通过点击加载更多*/ $(document).on('click', '.js-load-more', function(){ counter ++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); }); /*通过自动监听滚动事件加载更多,可选支持*/ config.isEnd = false; /*结束标志*/ config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/ $(window).scroll(function(){ /*是否开启滚动加载*/ if(!config.scroll){ return; } /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/ if(config.isEnd == true || config.isAjax == true){ return; } /*当滚动到最底部以上100像素时， 加载新内容*/ if ($(document).height() - $(this).scrollTop() - $(this).height()<100){ counter ++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); } }); /*第一次自动加载*/ callback && callback(config, pageStart, pageSize); }, } $.loadmore = loadmore; })(window, window.jQuery || window.Zepto);
如何使用呢？很简单：
$.loadmore.get(getData, { scroll: true, //默认是false,是否支持滚动加载 size:7, //默认是10 flag: 1, //自定义参数，可选，示例里没有用到 });
第一个参数是回调函数，即我们的业务逻辑。我把最终修改过的业务逻辑方法贴出来：
function getData(config, offset,size){ config.isAjax = true; $.ajax({ type: 'GET', url: 'json/blog.json', dataType: 'json', success: function(reponse){ config.isAjax = false; var data = reponse.list; var sum = reponse.list.length; var result = ''; /************业务逻辑块：实现拼接html内容并append到页面*****************/ //console.log(offset , size, sum); /*如果剩下的记录数不够分页，就让分页数取剩下的记录数 * 例如分页数是5，只剩2条，则只取2条 * * 实际MySQL查询时不写这个 */ if(sum - offset < size ){ size = sum - offset; } /*使用for循环模拟SQL里的limit(offset,size)*/ for(var i=offset; i< (offset+size); i++){ result +='<div>'+ '<a href="'+ data[i].url +'" target="_blank"><h4>'+ data[i].title +'</h4></a>'+ '<p>'+ data[i].desc +'</p>'+ '</div>'; } $('.js-blog-list').append(result); /*******************************************/ /*隐藏more*/ if ( (offset + size) >= sum){ $(".js-load-more").hide(); config.isEnd = true; /*停止滚动加载请求*/ //提示没有了 }else{ $(".js-load-more").show(); } }, error: function(xhr, type){ alert('Ajax error!'); } }); }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【js实现加载更多功能实例】相关文章：
★ Javascript实现的SHA-256加密算法完整实例