listloading 一個移動端的上拉、下拉加載更多的組件

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 3D 轉換來實現滾動效果，transform屬性使用硬件加速，性能方法獲得很大提升。支持Node引入，require引入.

效果圖:

demo地址: https://gtdalp.github.io/widg...

npm安裝

npm install listloading

使用方法以下：

一、html結構

<div id="listloading">
    <div>
        <ul id="order-list"></ul>
    </div>
</div>

與iscroll建立的結構同樣，可是指定的建立的元素節點必須指定ID，由於在組件裏面發佈訂閱模式須要作一個標識。由於iscroll在節點元素建立以前，必須先設定高度，不然會致使沒法滾動；iscroll建立完畢是指定給第一個子元素滾動，因此listloading的上拉和下拉刷新也是追加到第一個子元素裏面，其實把第一個子元素想象成爲html裏面的body就能夠了。

二、須要引入的js

<script src="../src/jslib/zepto.min.js"></script>
<script src="../src/jslib/iscroll.js"></script>
<script src="../build/listloading.min.js"></script>

三、調用

var Listloading = require('listloading');
var m = 3;
var n = 0;
var hei = $(window).height();
// 建立iscroll以前必需要先設置父元素的高度，不然沒法拖動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 = new 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){  // 下拉刷新
        // true則爲默認加載 false爲下拉刷新
        if (flg) {
            console.log('默認加載');
        }
        m = 3;
        var __html = createHtml();
        $('#order-list').html(__html);
        // 執行完執行方法以後必須執行回調 回調的做用是通知默認加載已經所有執行完畢，程序須要去建立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 = new Listloading('.listloadingClass', {
//     pullUpAction : function(cb){   //上拉加載更多
//         k--;
//         var flg = false;
//         var __html = createHtml();
//         if(k < 1){
//             flg = true;
//         }else{
//             $('#listloadingClass-order-list').append(__html);
//         }
//         // 數據加載完畢須要返回 end爲true則爲所有數據加載完畢
//         cb(flg);
        
//     },
//     pullDownAction : function(cb, flag){  //下拉刷新
//         // flag 爲true 第一次加載
//         if (flag) {
//             // dosomething...
//         }
//         k = 3;
//         var __html = createHtml();
//         $('#listloadingClass-order-list').html(__html);
//         // 執行完執行方法以後必須執行回調 回調的做用是通知默認加載已經所有執行完畢，程序須要去建立iscroll或者作下拉刷新動做
//         cb();
//     }
// });

四、API

4.1 下拉刷新

初始化會執行一次，主要是建立iscroll，以後每次下拉刷新結束以後執行，當在方法裏面執行完畢你的程序以後須要執行一個回調函數，告知已經所有程序執行完畢，listloading就會自動去調用iscroll的刷新功能，回調不須要傳參。

options.pullDownAction = function(cb, flag){  // 下拉刷新
    // flag 爲true 第一次加載
    if (flag) {
        // dosomething...
    }
    // 執行完執行方法以後必須執行回調
    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

├────build
|      └──listloading.js           // 源文件
├────demos
|      └──....                     // demo字體樣式
├────dist
|      |──css
|      |   └──listloading.min.css  // 壓縮css
|      └──js
|          └──listloading.min.js   // 壓縮js源文件
├────src
|      |──css
|      |    └──base.css            // 基礎base樣式
|      |──fontface        
|      |     └──...                // 字體文件
|      |──images                  
|      |     └──...                // demo圖片
|      |──jslib
|      |     └── ...               // 第三方庫