js实现加载更多功能实例
网络编程 2021-07-04 20:01www.168986.cn编程入门
这篇文章主要介绍了js实现加载更多功能的方法,以实例演示了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下
项目的一个前端页面展示已购买商品时，要求能下拉加载更多。关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。
但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。
h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。
基于按钮实现加载更多
最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，隐藏加载更多按钮。
效果如下
页面html
<div class="content">
<div class="weui_panel weui_panel_aess">
<div class="weui_panel_hd">文章列表</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--加载更多按钮-->
<div class="js-load-more">加载更多</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',
suess: 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 class="weui_media_box weui_media_text">'+
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ 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.
可以传的参数默认有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',
suess: 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 class="weui_media_box weui_media_text">'+
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ 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!');
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程