js实现加载更多的功能示例

当项目首页显示采购商品时，需要下拉加载更多。关于如何实现“load more”功能，网上有外挂，比如大家熟知的上拉Load More，以及使用iscroll.js实现的下拉刷新功能

但是实际使用起来很麻烦。因为是第三方插件，按照对方定义的方法使用总是不尽人意。另外，iscroll.js本身并没有集成和加载更多的功能，所以需要自己进行扩展。如果您想继续使用iscroll.js来加载更多的函数，您可以看到上面给出的链接。

在h5项目中，需要实现一个简单的分页功能。由于是移动终端，最好使用“加载更多”而不是在PC终端上翻页。

根据按钮加载更多内容

最简单的就是给一个按钮加载更多。如果还有数据，点击加载更多，继续拉几条数据；在没有更多数据之前，隐藏“加载更多”按钮。

效果如下：

网页html:

div class=' content ' div class=' weui _ panel weui _ panel _ access ' div class=' weui _ panel _ HD '文章列表/div div class=' weui _ panel _ bdjs-blog-list '/div/div！-加载更多按钮-div class=' js-load-more '加载更多/div/div脚本src=' http : js/zepto . min . js '/脚本加载更多按钮样式：loadmore.css:

@ charset“utf-8”；js-load-more { padd :0 15px；宽度width:120px高度：30 px；背景-color : # d 31733；color: # fff线高：30 px；文本对齐：居中；border-radius :5 px；margin:20px汽车；border:0无；font-size :16 px；display:none/*默认不显示，ajax调用成功后再决定是否显示。*/}加载更多js代码：

$(function(){ /*初始化*/var counter=0；/* counter */var page start=0；/* offset */var page size=4；/*size*//*首次加载*/getData(pageStart，page size)；/*监控和加载更多*/$(文档)。打开('点击'，'。js-load-more '，function(){ counter；pageStart=计数器*页面大小；getData(pageStart，page size)；});});这里没有太多代码。GetData(pageStart，pageSize)是一个业务逻辑代码，负责从服务器上拉取数据。这里有一个例子：

函数getData(偏移量，大小){ $。ajax({ type: 'GET '，url: 'json/blog.json '，dataType: 'json '，success : function(reponse){ var data=reponse . list；var sum=reponse . list . length；var结果=' '；/* * * *业务逻辑块：实现html内容拼接并追加到页面* * * * * * * * * * *//console . log(偏移量、大小、总和)；/*如果剩余记录数不足以分页，让页数取剩余记录数*例如，如果页数是5，只剩下2页，那么只取2页* *如果不在实际的MySQL查询中写这个就不会有问题*/If(sum-offset size){ size=sum-offset；}/*使用for循环模拟极限(偏移量、大小)*/for (var I=偏移量；I(偏移尺寸)；I){ result=' div class=' weui _ media _ box weui _ media _ text ' ' ' a href=' data[I]。URL ' ' target=' _ blank ' H4 class=' weui _ media _ title ' '数据[i]。title '/H4/a ' ' p class=' weui _ media _ desc ' '数据[i]。desc '/p ' '/div '；} $('.js-blog-list)。追加(结果)；/* * * * }else{ $('。js-load-more’)。show()；} }，error:函数(xhr，type){ alert('Ajax错误！' );} });}相对简单。

根据滚动事件加载更多内容。我们点击按钮加载更多，整个过程相对简单。在这里，我提供了另一种实现更多加载的方法：基于滚动事件。

直接粘贴代码：

$(function(){ /*初始化*/var counter=0；/* counter */var page start=0；/* offset */var page size=7；/* size */var isEnd=false；/*结束标志*//*首次加载*/getData(pageStart，page size)；/*收听并加载更多内容*/$(窗口)。scroll(function(){ if(isend==true){ return；}//当滚动到底部上方100像素时，加载新内容//核心代码if ($ (document)。高度()-$(这个)。scrolltop ()-$ (this)。高度()100){计数器；pageStart=计数器*页面大小；getData(pageStart，page size)；} });});可以看出代码没有太大变化，主要取决于核心代码中的判断条件：滚动到底部以上100像素时，加载新内容。

业务逻辑getData(pageStart，pageSize)只需将if((偏移量大小)=sum)中的逻辑更改为：

if((偏移量大小)=sum){ isEnd=true；//没有了}。

当然，还有一些需要优化的地方，比如：如何防止服务器响应过快，造成多次请求？

综合例子

通过上面的例子，很明显第二个更好，不需要点击。但是第二种方法有一个问题：

如果您将页面大小设置为一次显示2或3页(大小=2)，并且总记录为20，您会发现您无法触发向下滚动来加载更多逻辑。此时，如果有一个点击按钮来加载更多内容就好了。

因此，我们可以将以上两种方法结合起来：

默认情况下，滚动事件用于加载更多内容，当显示数量太少而无法触发向下滚动以加载更多逻辑时，请使用加载更多点击事件。在这里，我简单地抽象了加载更多的行为，并编写了一个简单的插件：

loadmore.js

/* * load more . js * load more * * @ time 2016-4-18 17:40336025 * @作者飞鸿英~ * @email [emailprotected] *可以传递的参数有：大小默认，滚动可自定义* */；(函数(w，$){ var loadmore={/*在单个页面上加载更多常规方法* * @param回调方法* @param config自定义参数* */get:function(回调，config) {var config=config？config : { }；/*防止未传输的参数报告错误*/var计数器=0；/* counter */var page start=0；var pageSize=config.size？config.size : 10/*单击以加载更多*/$(文档)。打开('点击'，'。js-load-more '，function(){ counter；pageStart=计数器*页面大小；回调回调(config、pageStart、page size)；});/*通过自动监控滚动事件加载更多，可选支持*/config . isend=false；/*结束标志*/config . isajax=false；/*防止服务器响应过快，导致多个请求*/$(窗口)。Scroll(函数(){/*是否开始滚动加载*/if(！config . scroll){ return；}/*如果滚动加载期间没有更多数据，并且正在发生请求，则不能继续*/if (config。isend==true | | config。isajax==true){ return；}/*当滚动到底部上方100像素时，加载新内容*/if ($ (document)。高度()-$(这个)。scrolltop ()-$ (this)。高度()100){计数器；pageStart=计数器*页面大小；回调回调(config、pageStart、page size)；} });/*首次自动加载*/回调回调(config、pagestart、page size)；}, } $.loadmore=loadmore})(window，window.jQuery || window。zepto)；怎么用？很简单：

$.加载更多。get (getdata，{scroll: true，//default为false，是否支持滚动加载size:7，//default为10flag 3360 1，//用户自定义参数，可选，示例中未使用)}；第一个参数是回调函数，这是我们的业务逻辑。我发布了最终修改后的业务逻辑方法：

函数getData(配置、偏移量、大小){ config。isajax=true$.ajax({ type: 'GET '，url: 'json/blog.json '，dataType: 'json '，success : function(repo NSE){ config。isajax=falsevar数据=回购反应。列表；var sum=reponse。名单。长度；定义变量结果=' ';/************业务逻辑块：实现拼接超文本标记语言内容并附加到页面**************///console.log(偏移量、大小、总和);/*如果剩下的记录数不够分页，就让分页数取剩下的记录数* 例如分页数是5,只剩2条，则只取2条* * 实际关系型数据库查询时不写这个*/if(和-偏移量大小){ size=和-偏移量；} /*使用为循环模拟结构化查询语言里的限值（偏移量、大小)*/for(var I=偏移量；一(偏移尺寸);I){ result=' div class=' weui _ media _ box weui _ media _ text ' ' ' a href=' data[I].URL ' ' target=' _ blank ' H4类=' weui _ media _ title ' '数据[i].title '/H4/a ' ' p class=' weui _ media _ desc ' '数据[i].desc '/p ' '/div '；} $('.js-blog-list ).追加（结果);/*******************************************//*隐藏更多*/if((偏移量大小)=sum){ $(').js-load-more ').hide()；config.isEnd=true/*停止滚动加载请求*///提示没有了}else{ $(' .js-load-more ').show()；} }，错误：函数(xhr，类型){ alert('Ajax错误!');} });}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。