js实现『加载更多』功能实例

DEMO : 滚动加载示例

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

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

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

基于按钮实现加载更多

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

DEMO : 基于按钮实现加载更多

这里提前准备好数据。

演示数据格式：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：

<div class="content">
    <div class="weui_panel weui_panel_access">
        <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',
    	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 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)事件。

DEMO : 基于滚动事件实现加载更多

直接贴代码了：

$(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，你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。

因此，我们可以把以上两种方法合在一起：

默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。

DEMO : 综合实例

这里，我对加载更多这个行为进行简单的抽象，写了个简单的插件：

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 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!');
		}
	});
}

基本上与最初写的是一样的。

示例代码托管在Github: https://github.com/52fhy/loadmore

-- 全文完 --