摘要：是一個(gè)移動端的上拉下拉加載更多的組件。因?yàn)樵诠?jié)點(diǎn)元素創(chuàng)建之前，必須先設(shè)定高度，否則會導(dǎo)致無法滾動創(chuàng)建完畢是指定給第一個(gè)子元素滾動，所以的上拉和下拉刷新也是追加到第一個(gè)子元素里面，其實(shí)把第一個(gè)子元素想象成為里面的就可以了。

listloading是一個(gè)移動端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎(chǔ)上開發(fā)的組件，基礎(chǔ)庫可以使用jquery.js或者zepto.js操作dom節(jié)點(diǎn)，目前我是使用了zepto.js作為基礎(chǔ)庫操作dom，以jquery插件的形式存在。如果不想以插件方式使用，則只需要把listloading直接移植你需要的庫里面就ok啦。listloading主要針對移動端而生，在使用瀏覽器自帶滾動，用戶體驗(yàn)很不友好，與Android和ios差別甚遠(yuǎn)，所以選擇iscroll.js，它實(shí)現(xiàn)方式是使用css3動畫translate 3D 轉(zhuǎn)換來實(shí)現(xiàn)滾動效果，transform屬性使用硬件加速，性能方法得到很大提高。支持Node引入，require引入.

npm install listloading

與iscroll創(chuàng)建的結(jié)構(gòu)一樣，但是指定的創(chuàng)建的元素節(jié)點(diǎn)必須指定ID，因?yàn)樵诮M件里面發(fā)布訂閱模式需要做一個(gè)標(biāo)識。因?yàn)閕scroll在節(jié)點(diǎn)元素創(chuàng)建之前，必須先設(shè)定高度，否則會導(dǎo)致無法滾動；iscroll創(chuàng)建完畢是指定給第一個(gè)子元素滾動，所以listloading的上拉和下拉刷新也是追加到第一個(gè)子元素里面，其實(shí)把第一個(gè)子元素想象成為html里面的body就可以了。

var Listloading = require("listloading");
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 += "
" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + "listloading" + (n++) + "
移動端上拉下拉刷新組件...
";
    }
    return __html;
}
// demo
var listloading = new Listloading("#listloading", {
    disableTime: true,  // 是否需要顯示時(shí)間
    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){  // 下拉刷新
        // true則為默認(rèn)加載 false為下拉刷新
        if (flg) {
            console.log("默認(rèn)加載");
        }
        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: {
        //
    }
});

// 點(diǎn)擊事件
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);
//         }
//         // 數(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();
//     }
// });

初始化會執(zhí)行一次，主要是創(chuàng)建iscroll，之后每次下拉刷新結(jié)束之后執(zhí)行，當(dāng)在方法里面執(zhí)行完畢你的程序之后需要執(zhí)行一個(gè)回調(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();
}

每次上拉加載更多結(jié)束之后執(zhí)行，同樣的在執(zhí)行完你的程序之后需要執(zhí)行一個(gè)回調(diào)函數(shù)，回調(diào)里面需要回調(diào)一個(gè)布爾值，如果為true則怎么已經(jīng)全部加載完畢，就已經(jīng)拉到底了。

options.pullUpAction = function(cb){  // 上拉加載更多
    .....
    // 執(zhí)行完執(zhí)行方法之后必須執(zhí)行回調(diào) true為上拉到底
    cb(true);
}

listloading.destroy();

滾動區(qū)域節(jié)點(diǎn)有增刪則需要在操作完畢之后調(diào)用此方法

listloading.refresh();

true下拉顯示時(shí)間，距離上次刷新的時(shí)間

options.disableTime = true

options.upLoadmoretxt = "上拉加載更多文字";  // 里面可以放html標(biāo)簽

options.pullDrefreshtxt = "下拉刷新文字"; // 里面可以放html標(biāo)簽

options.loadertxt = "正在加載中文字"; // 里面可以放html標(biāo)簽

options.Realtimetxt = "松開刷新文字"; // 里面可以放html標(biāo)簽

options.loaderendtxt = "已經(jīng)全部加載完畢文字"; // 里面可以放html標(biāo)簽

options.iscrollOptions = {};

listloading

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