加载更多组件实现-优快云博客

本文介绍了一个通用的加载更多组件实现方案，支持点击和滚动加载两种方式，并提供了回调函数以供扩展。该组件能够根据页面滚动情况自动加载更多数据，同时支持自定义配置如每页加载数量等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
 * loadmore.js
 * 加载更多
 * 可以传的参数默认有：size,scroll 可以自定义
 * */

;(function(w,$){
	
	var loadmore = { 
		/*单页加载更多 通用方法
		 * 
		 * @param callback 回调方法
		 * @param config 自定义参数
		 * */
		get : function(callback, config){
			var config = config ? config : {}; /*防止未传参数报错*/

			var page = 1; /*页码*/
			var pageSize = config.size ? config.size : 10;

			/*默认通过点击加载更多*/
			$(document).on('click', '.js-load-more', function(){
				page ++;
				callback && callback(config, page, pageSize);
			});
			
			/*通过自动监听滚动事件加载更多,可选支持*/
			config.isEnd  = false; /*结束标志*/
			config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/
			$(window).scroll(function(){
				/*是否开启滚动加载*/
				if(!config.scroll){
					return;
				}
				
				/*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
				if(config.isEnd == true || config.isAjax == true){
					return;
                }

				/*加载新内容*/
                var top = document.documentElement.scrollTop + document.body.scrollTop;
				if (top + window.innerHeight >= document.body.scrollHeight){
					page ++;
					callback && callback(config, page, pageSize);
				}
			});

			/*第一次自动加载*/
			callback && callback(config, page, pageSize);
		},
			
	}

	$.loadmore = loadmore;

}）（window，window.jQuery || window.Zepto）;

<span class="tips_loading js-load-more">上滑加载更多</span>

$.loadmore.get(getData, {scroll: true,size:12});