listloading.js
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();
});
效果圖
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 = {};
github下載地址： https://github.com/gtdalp/listloading.git 如果覺得還過得去請給個星吧O(∩_∩)O~