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 相关文章推荐
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
vue实现文件上传功能
Aug 13 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
jQuery实现视频展示效果
May 30 jQuery
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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中的时间处理
2006/10/09 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
大课间活动制度
2014/01/18 职场文书
学徒工职责
2014/03/06 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
低碳环保标语
2014/06/12 职场文书
教师节感谢信
2015/01/22 职场文书
瘦西湖导游词
2015/02/03 职场文书
车间统计员岗位职责
2015/04/14 职场文书
排球赛新闻稿
2015/07/17 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers