前端vue里面点击加载更多_js实现『加载更多』功能实例

DEMO : 滚动加载示例

关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。

但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。

h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。

基于按钮实现加载更多

最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，隐藏加载更多按钮。

这里提前准备好数据。

演示数据格式：blog.json

{

"list": [

{

"title": "这是title",

"url": "http://www.cnblogs.com/52fhy/p/5271447.html",

"desc": "摘要"

},

{

"title": "这是title2",

"url": "http://www.cnblogs.com/52fhy/p/4823390.html",

"desc": "摘要"

}]

}

页面html：

文章列表

加载更多

加载更多按钮样式：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(pageSta