listloading下載 - 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/widget/listloading/demos/ listloading .html

npm安裝

 npm install listloading

使用方法如下：

1、html結構

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

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

與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 .min.js" > </ script >

3、調用

listloading '); var m = 3; var n = 0; var hei = $(window).height(); // 创建iscroll之前必须要先设置父元素的高度，否则无法拖动iscroll $('# listloading , . listloading Class').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 listloading Class = new listloading ('. listloading Class', { // pullUpAction : function(cb){ //上拉加载更多 // k--; // var flg = false; // var __html = createHtml(); // if(k < 1){ // flg = true; // }else{ // $('# listloading Class-order-list').append(__html); // } // // 数据加载完毕需要返回 end为true则为全部数据加载完毕 // cb(flg); // }, // pullDownAction : function(cb, flag){ //下拉刷新 // // flag 为true 第一次加载 // if (flag) { // // dosomething... // } // k = 3; // var __html = createHtml(); // $('# listloading Class-order-list').html(__html); // // 执行完执行方法之后必须执行回调回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll或者做下拉刷新动作 // cb(); // } // });">

 var listloading = require ( ' listloading ' ) ;
var m = 3 ;
var n = 0 ;
var hei = $ ( window ) . height ( ) ;
// 创建iscroll之前必须要先设置父元素的高度，否则无法拖动iscroll
$ ( '# listloading , . listloading Class' ) . 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 listloading Class = new listloading ('. listloading Class', {
//     pullUpAction : function(cb){   //上拉加载更多
//         k--;
//         var flg = false;
//         var __html = createHtml();
//         if(k < 1){
//             flg = true;
//         }else{
//             $('# listloading Class-order-list').append(__html);
//         }
//         // 数据加载完毕需要返回 end为true则为全部数据加载完毕
//         cb(flg);
        
//     },
//     pullDownAction : function(cb, flag){  //下拉刷新
//         // flag 为true 第一次加载
//         if (flag) {
//             // dosomething...
//         }
//         k = 3;
//         var __html = createHtml();
//         $('# listloading Class-order-list').html(__html);
//         // 执行完执行方法之后必须执行回调 回调的作用是通知默认加载已经全部执行完毕，程序需要去创建iscroll或者做下拉刷新动作
//         cb();
//     }
// });

4、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
|      |     └── . . .               // 第三方库

歡迎貢獻你的程式碼

在這裡特別感謝microlv 的技術支援和程式碼貢獻

License

Licensed under the MIT License.

展開

listloading

listloading .js

效果圖:

demo網址: https://gtdalp.github.io/widget/listloading/demos/ listloading .html

npm安裝

使用方法如下：

1、html結構

2、需要引進的js

3、調用

4、API

4.1 下拉刷新

4.2 上拉加載更多

4.3 銷毀listloading

4.4 刷新listloading

4.5 是否顯示時間預設值為false

4.6 上拉載入更多文字

4.7 下拉刷新文字

4.8 正在加載中文字

4.9 放開刷新文字

4.10 已經全部載入完畢文字

4.12 iscroll的配置

目錄結構

歡迎貢獻你的程式碼

License

aurelia

健康網全站(帶15萬個資料)

mediathekviewweb

doodle

Web3wiki Website

PDFWebSite

chat.petals.dev

GPT Prompt Templates

GPTyped

aurelia

健康網全站(帶15萬個資料)

mediathekviewweb

waymo open dataset

termwind

wp functions