Listloading.js移動端上拉下拉重新整理組件_javascript技巧

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);// 執行完執行方法之後必須執行回調 回調的作用是通知預設載入已經全部執行完畢，程式需要去建立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移動端上拉下拉重新整理組件，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！