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は、css 3アニメーションtranslate 3 D変換を用いてスクロール効果を実現し、transform属性はハードウェアで加速し、性能方法が大幅に向上した.Node導入、require導入をサポートする.
効果図:
demoアドレス:https://gtdalp.github.io/widg...
npmインストール

npm install listloading

使用方法は次のとおりです.
1.html構造

iscrollで作成された構造と同じですが、コンポーネント内でサブスクリプションモードをパブリッシュするには識別が必要なため、作成された要素ノードを指定する必要があります.iscrollはノード要素を作成する前に高さを設定する必要があります.そうしないと、スクロールできません.iscrollが作成されたのは最初のサブエレメントに指定されたスクロールなので、listloadingのプルアップとドロップダウンリフレッシュも最初のサブエレメントに追加されますが、実は最初のサブエレメントをhtmlのbodyに想像すればいいのです.
2、導入が必要なjs

3、 び し

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 += '
' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() + 'listloading' + (n++) + '
           ...
';
    }
    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();
//     }
// });

4、API
4.1ドロップダウン・リフレッシュ
は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
|      |     └── ...               //