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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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代码
2010/02/16 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
Javascript开发包大全整理
2006/12/22 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
TensorFlow实现创建分类器
2018/02/06 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
工地安全生产标语
2014/06/06 职场文书
公司授权委托书范本
2014/09/18 职场文书
结婚典礼致辞
2015/07/28 职场文书