DIV CSS 佈局教程網

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();
});

效果圖

/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移動端上拉下拉刷新組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！