listloading一个挪动端的上拉、下拉加载更多的组件

listloading是一个挪动端的上拉、下拉加载更多的组件。重要依赖于iscroll.js v5.1.2基本上开辟的组件，基本库能够运用jquery.js或许zepto.js操纵dom节点，现在我是运用了zepto.js作为基本库操纵dom，以jquery插件的情势存在。假如不想以插件体式格局运用，则只需要把listloading直接移植你需要的库内里就ok啦。listloading重要针对挪动端而生，在运用浏览器自带转动，用户体验很不友爱，与Android和ios差异甚远，所以挑选iscroll.js，它完成体式格局是运用css3动画translate 3D 转换来完成转动结果，transform属性运用硬件加速，机能要领获得很大进步。支撑Node引入，require引入.

结果图:

demo地点: https://gtdalp.github.io/widg&＃8230;

npm装置

npm install listloading

运用要领以下：

1、html构造

与iscroll建立的构造一样，然则指定的建立的元素节点必需指定ID，由于在组件内里宣布定阅形式需要做一个标识。由于iscroll在节点元素建立之前，必需先设定高度，不然会致使没法转动；iscroll建立终了是指定给第一个子元素转动，所以listloading的上拉和下拉革新也是追加到第一个子元素内里，实在把第一个子元素设想成为html内里的body就能够了。

2、需要引入的js

3、挪用

var Listloading = require('listloading');
var m = 3;
var n = 0;
var hei = $(window).height();
// 建立iscroll之前必需要先设置父元素的高度，不然没法拖动iscroll
$('#listloading, .listloadingClass').height(hei);
// 模板
var createHtml = function(){
var __html = '';
for(var i = 0; i <15; i++){
var now = new Date().getTime();
now = new Date(now + i*1000000);
__html += '

4、API

4.1 下拉革新

初始化会实行一次，重如果建立iscroll，以后每次下拉革新完毕以后实行，当在要领内里实行终了你的顺序以后需要实行一个回调函数，示知已悉数顺序实行终了，listloading就会自动去挪用iscroll的革新功用，回调不需要传参。

options.pullDownAction = function(cb, flag){ // 下拉革新
// flag 为true 第一次加载
if (flag) {
// dosomething...
}
// 实行完实行要领以后必需实行回调
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

├────build
| └──listloading.js // 源文件
├────demos
| └──.... // demo字体款式
├────dist
| |──css
| | └──listloading.min.css // 紧缩css
| └──js
| └──listloading.min.js // 紧缩js源文件
├────src
| |──css
| | └──base.css // 基本base款式
| |──fontface
| | └──... // 字体文件
| |──images
| | └──... // demo图片
| |──jslib
| | └── ... // 第三方库