Listloading.js 移动端上拉下拉刷新组件使用指南
Listloading.js 是一个基于 iScroll.js v5.1.2 开发的移动端滚动组件,支持上拉加载与下拉刷新。该组件封装了 CSS3 硬件加速滚动,兼容 jQuery 和 Zepto.js。本文详细介绍其安装方法、HTML 结构要求、核心 API 配置及自定义文本选项,帮助开发者快速集成高性能滚动交互。
组件概述与原理
Listloading.js 是一款专为移动端设计的上拉加载与下拉刷新组件。它基于 iScroll.js v5.1.2 构建,底层依赖 jQuery.js 或 Zepto.js 进行 DOM 操作。作者目前使用 Zepto.js 作为基础库,并以 jQuery 插件的形式发布。若无需以插件形式使用,可直接将该组件移植至其他库中。针对移动端原生滚动体验不佳的问题,该组件利用 iScroll.js 通过 CSS3 translate 2D 转换实现滚动,并启用硬件加速,从而显著提升滚动性能,接近原生 Android 和 iOS 的体验。
安装与初始化
安装方式
代码示例如下:
npm install -g listloading
HTML 结构与 JS 引入
具体使用步骤如下:
1、HTML 结构要求
其 HTML 结构与 iScroll 创建结构一致,但指定创建的元素节点必须设置 ID,因为组件内部通过发布订阅模式需要该标识作为唯一标识。由于 iScroll 在创建节点前必须设定高度,否则会导致无法滚动,因此 Listloading 的上拉和下拉刷新内容均需追加到第一个子元素内。可将第一个子元素视为类似 HTML body 的容器。
2、所需引入的 JS 文件
<script src="../src/jslib/zepto.min.js"></script>
<script src="../src/jslib/iscroll.js"></script>
<script src="../build/listloading.js"></script>
3、调用方式
var m = 3, n = 0;
// 创建iscroll之前必须要先设置父元素的高度,否则无法拖动iscroll
$('#listloading').height($(window).height());
// 模板或者ajax请求方法
var createHtml = function(){
var __html = '';
for(var i = 0; i < 15; i++){
var now = new Date().getTime();
now = new Date(now + i*1000000);
__html += '<li><span class="icon"></span><p class="title"><time class="r">' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '</time>listloading' + (n++) + '</p><p class="text">移动端上拉下拉刷新组件...</li>';
}
return __html;
}
// 选择器必须是ID 因为要用到发布订阅做标识
var listloading = $('#listloading').listloading({
disableTime: true, // 是否需要显示时间
pullUpAction : function(cb){ //上拉加载更多
m--;
var flg = false;
var __html = createHtml();
if(m < 1){
flg = true;
}else{
$('#order-list').append(__html);
}
// 数据加载完毕需要返回 end为true则为全部数据加载完毕
cb(flg);
},
pullDownAction : function(cb){ //下拉刷新
m = 3;
n = 0;
var __html = createHtml();
$('#order-list').html(__html);
// 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕,程序需要去创建iscroll
cb();
},
// iscroll的API
iscrollOptions: {
//
}
});
// 点击事件 因为iscroll阻止了冒泡,它也建议自己写点击方法,如果开启preventDefault为false这行就是解决onclick失效问题, 但是开启这个值在微信下面拖动会有问题 滑动结束之后触发不到scrollend,所以我自己内嵌了一个事件方法
listloading.evt('li', 'click', function (dom) {
// dom.remove();
// $('#order-list').append(createHtml());
// listloading.refresh();
});
效果展示

/p>
核心 API 配置详解
4、API 接口说明
4.1 下拉刷新配置
初始化时会执行一次,主要用于创建 iScroll 实例。此后每次下拉刷新结束后会触发该回调。当用户自定义程序执行完毕后,必须调用回调函数以告知 Listloading 程序已完成,组件随后会自动调用 iScroll 的刷新功能。该回调函数无需传递参数。
options.pullDownAction = function(cb){ //下拉刷新
.....
// 执行完执行方法之后必须执行回调
cb();
}
4.2 上拉加载配置
每次上拉加载结束后执行。与下拉刷新类似,在自定义程序执行完毕后,需调用回调函数。回调函数中需传递一个布尔值:若为 true,则表示数据已全部加载完毕,触发“已无更多数据”状态。
options.pullUpAction = function(cb){ //下拉刷新
.....
// 执行完执行方法之后必须执行回调 true为下拉到底
cb(true);
}
4.3 销毁 ListLoading 实例
代码示例如下:
listloading.destroy();
4.4 刷新 ListLoading 实例
当滚动区域节点发生增删操作时,需在操作完成后调用此方法以更新滚动状态。
代码示例如下:
listloading.refresh();
4.5 是否显示时间(默认值:false)
设置为 true 时,下拉刷新会显示距离上次刷新的时间。
代码示例如下:
options.disableTime = true
4.6 上拉加载提示文字
代码示例如下:
options.upLoadmoretxt = '上拉刷新文字'; // 支持插入 HTML 标签
4.7 下拉刷新提示文字
代码示例如下:
options.pullDrefreshtxt = '下拉刷新文字'; // 支持插入 HTML 标签
4.8 加载中提示文字
代码示例如下:
options.loadertxt = '正在加载中文字'; // 支持插入 HTML 标签
4.9 松开刷新提示文字
代码示例如下:
options.Realtimetxt = '松开刷新文字'; // 支持插入 HTML 标签
4.10 全部加载完毕提示文字
代码示例如下:
options.loaderendtxt = '已经全部加载完毕文字'; // 支持插入 HTML 标签
4.12 iScroll 配置项
代码示例如下:
options.iscrollOptions = {};
以上介绍了 Listloading.js 移动端上拉下拉刷新组件的使用方法。如有任何疑问,欢迎留言,作者将及时回复。感谢对本站的支持!
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz:主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53
