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></span><p><time>' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + '</time>listloading' + (n++) + '</p><p>移動端上拉下拉刷新組件...</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);// 執行完執行方法之後必須執行回調回調的作用是通知默認加載已經全部執行完畢，程序需要去創建iscrollcb();},// 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移動端上拉下拉刷新組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！