ListLoading移動端加載組件
listloading.js
listloading是一個移動端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎(chǔ)上開發(fā)的組件，基礎(chǔ)庫可以使用jquery.js或者zepto.js操作dom節(jié)點，目前我是使用了zepto.js作為基礎(chǔ)庫操作dom，以jquery插件的形式存在。如果不想以插件方式使用，則只需要把listloading直接移植你需要的庫里面就ok啦。listloading主要針對移動端而生，在使用瀏覽器自帶滾動，用戶體驗很不友好，與Android和ios差別甚遠(yuǎn)，所以選擇iscroll.js，它實現(xiàn)方式是使用css3動畫translate 2D 轉(zhuǎn)換來實現(xiàn)滾動效果，transform屬性使用硬件加速，性能方法得到很大提高。
npm安裝
npm install -g listloading
使用方法如下：
1、html結(jié)構(gòu)
<div id="listloading"> <div> <ul id="order-list"></ul> </div> </div>
與iscroll創(chuàng)建的結(jié)構(gòu)一樣，但是指定的創(chuàng)建的元素節(jié)點必須指定ID，因為在組件里面發(fā)布訂閱模式需要做一個標(biāo)識。因為iscroll在節(jié)點元素創(chuàng)建之前，必須先設(shè)定高度，否則會導(dǎo)致無法滾動；iscroll創(chuàng)建完畢是指定給第一個子元素滾動，所以listloading的上拉和下拉刷新也是追加到第一個子元素里面，其實把第一個子元素想象成為html里面的body就可以了。
2、需要引入的js
<script src="../src/jslib/zepto.min.js"></script> <script src="../src/jslib/iscroll.js"></script> <script src="../build/listloading.min.js"></script>
3、調(diào)用
var m = 3;
var n = 0;
var hei = $(window).height();
// 創(chuàng)建iscroll之前必須要先設(shè)置父元素的高度，否則無法拖動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 += '<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;
}
// demo
// 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);
// }
// // 數(shù)據(jù)加載完畢需要返回 end為true則為全部數(shù)據(jù)加載完畢
// cb(flg);
// },
// pullDownAction : function(cb, flag){ //下拉刷新
// flag 為true 第一次加載
// if (flag) {
// // dosomething...
// }
// m = 3;
// var __html = createHtml();
// $('#order-list').html(__html);
// // 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào) 回調(diào)的作用是通知默認(rèn)加載已經(jīng)全部執(zhí)行完畢，程序需要去創(chuàng)建iscroll
// cb();
// },
// // iscroll的API
// iscrollOptions: {
// //
// }
// });
// // 點擊事件
// listloading.evt('li', 'click', function (dom) {
// // dom.remove();
// // $('#order-list').append(createHtml());
// // listloading.refresh();
// });
// demo
var k = 3;
var listloadingClass = $('.listloadingClass').listloading({
pullUpAction : function(cb){ //上拉加載更多
k--;
var flg = false;
var __html = createHtml();
if(k < 1){
flg = true;
}else{
$('#listloadingClass-order-list').append(__html);
}
// 數(shù)據(jù)加載完畢需要返回 end為true則為全部數(shù)據(jù)加載完畢
cb(flg);
},
pullDownAction : function(cb, flag){ //下拉刷新
// flag 為true 第一次加載
if (flag) {
// dosomething...
}
k = 3;
var __html = createHtml();
$('#listloadingClass-order-list').html(__html);
// 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào) 回調(diào)的作用是通知默認(rèn)加載已經(jīng)全部執(zhí)行完畢，程序需要去創(chuàng)建iscroll
cb();
}
});
效果圖
4、API
4.1 下拉刷新
初始化會執(zhí)行一次，主要是創(chuàng)建iscroll，之后每次下拉刷新結(jié)束之后執(zhí)行，當(dāng)在方法里面執(zhí)行完畢你的程序之后需要執(zhí)行一個回調(diào)函數(shù)，告知已經(jīng)全部程序執(zhí)行完畢，listloading就會自動去調(diào)用iscroll的刷新功能，回調(diào)不需要傳參。
options.pullDownAction = function(cb, flag){
// 下拉刷新
// flag 為true 第一次加載
if (flag) { // dosomething... } // 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào)
cb();
}
4.2 上拉加載更多
每次上拉加載更多結(jié)束之后執(zhí)行，同樣的在執(zhí)行完你的程序之后需要執(zhí)行一個回調(diào)函數(shù)，回調(diào)里面需要回調(diào)一個布爾值，如果為true則怎么已經(jīng)全部加載完畢，就已經(jīng)拉到底了。
options.pullUpAction = function(cb){ // 上拉加載更多 .....
// 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào) true為上拉到底
cb(true);
}
4.3 銷毀ListLoading
listloading.destroy();
4.4 刷新listloading
滾動區(qū)域節(jié)點有增刪則需要在操作完畢之后調(diào)用此方法
listloading.refresh();
4.5 是否顯示時間 默認(rèn)值為false
true下拉顯示時間，距離上次刷新的時間
options.disableTime = true
4.6 上拉加載更多文字
options.upLoadmoretxt = '上拉加載更多文字'; // 里面可以放html標(biāo)簽
4.7 下拉刷新文字
options.pullDrefreshtxt = '下拉刷新文字'; // 里面可以放html標(biāo)簽
4.8 正在加載中文字
options.loadertxt = '正在加載中文字'; // 里面可以放html標(biāo)簽
4.9 松開刷新文字
options.Realtimetxt = '松開刷新文字'; // 里面可以放html標(biāo)簽
4.10 已經(jīng)全部加載完畢文字
options.loaderendtxt = '已經(jīng)全部加載完畢文字'; // 里面可以放html標(biāo)簽
4.11 iscroll的配置
options.iscrollOptions = {};