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 遮照层实现代码
Mar 31 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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
C#静态方法与非静态方法实例分析
2014/09/22 PHP
利用javascript查看html源文件
2006/11/08 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
python web框架学习笔记
2016/05/03 Python
Python人脸识别初探
2017/12/21 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
安装python及pycharm的教程图解
2019/10/10 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
浅析python中的del用法
2020/09/02 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
Order by的几种用法
2013/06/16 面试题
加多宝凉茶广告词
2014/03/18 职场文书
结婚保证书范文
2014/04/29 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
司法助理专业自荐书
2014/06/13 职场文书
大学英语专业求职信
2014/06/21 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
在职证明书模板
2015/06/15 职场文书
教师节晚会主持词
2015/06/30 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python