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


Posted in Javascript onAugust 04, 2016

listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在。如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll.js,它实现方式是使用css3动画translate 2D 转换来实现滚动效果,transform属性使用硬件加速,性能方法得到很大提高。

npm安装

npm install -g listloading

使用方法如下:

1、html结构

与iscroll创建的结构一样,但是指定的创建的元素节点必须指定ID,因为在组件里面发布订阅模式需要做一个标识。因为iscroll在节点元素创建之前,必须先设定高度,否则会导致无法滚动;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();
});

效果图

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

Javascript 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 #Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 #Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 #Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 #Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 #Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 #Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 #Javascript
You might like
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Java及python正则表达式详解
2017/12/27 Python
Python线性方程组求解运算示例
2018/01/17 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python pymysql库的常用操作
2020/10/16 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
最新大学生自我评价
2013/09/24 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
广告学专业求职信
2014/06/19 职场文书
家庭困难证明
2014/10/12 职场文书
任命书格式模板
2015/09/22 职场文书
python爬虫--selenium模块
2021/03/31 Python
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python