Listloading.js移动端上拉下拉刷新组件

<script src="/UploadFiles/2021-04-02/zepto.min.js">

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>
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移动端上拉下拉刷新组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！