Listloading.js 移动端上拉下拉刷新组件使用指南

作者:小满

时间:2026-10-30

浏览:70

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 移动端上拉下拉刷新组件的使用方法。如有任何疑问,欢迎留言,作者将及时回复。感谢对本站的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章