关于dropload.js使用方法 -tutorial js-php.cn

Jadual Kandungan

示例一、加载底部

示例二、加载顶部、底部

示例三、多次加载

示例四、固定布局，加载顶部、底部

Rumah

hujung hadapan web

tutorial js

关于dropload.js使用方法

一个新手

Oct 20, 2017 am 11:15 AM

javascript Cara menggunakan

第一步，下载dropload插件，dropload插件下载地址官方文档：https://github.com/ximan/dropload
第二步，将下载好的dropload插件中的dropload.css，dropload.min.js文件引入到页面中，注意还要引入 Jquery1.7 以上或者 Zepto 二选一，不要同时都引用，因为dropload是基于jquery实现的
第三步，将以下代码放到页面的最底部，注意是最底部，否则dropload插件获取不了高度

**基本代码结构**//#content为某个p的id  var dropload = $(&#39;#content&#39;).dropload({   
//scrollArea很关键，要不然加载更多不起作用  scrollArea : window,  
domUp : {  
    domClass   : &#39;dropload-up&#39;,  
    domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;,  
    domUpdate  : &#39;<p class="dropload-update">↑释放更新</p>&#39;,  
    domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;  },  
domDown : {  
    domClass   : &#39;dropload-down&#39;,  
    domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;,  
    domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;,  
    domNoData  : &#39;<p class="dropload-noData">暂无数据</p>&#39;  
   },  
loadUpFn : function(me){  
        //下拉刷新需要调用的函数  
        alert("下拉刷新需要调用的函数");  
        //重置下拉刷新  
        me.resetload();      
},  
loadDownFn : function(me){  
        //上拉加载更多需要调用的函数  
        alert("上拉加载更多需要调用的函数");  
        //定时器函数,为了看出上拉加载更多效果  
            setTimeout(function(){  
                // 每次数据加载完，必须重置  
                    me.resetload();  
                },1000);  
           }  
});

Salin selepas log masuk

一些完整的例子按需查看就好

示例一、加载底部

<script>$(function(){
    // 页数
    var page = 0;    // 每页展示5个
    var size = 5;    // dropload调用
    $(&#39;.content&#39;).dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;            // 拼接HTML
            var result = &#39;&#39;;
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,//配合后台接口
                dataType: &#39;json&#39;,
                success: function(data){
                    var arrLen = data.length;                    
                        if(arrLen > 0){                        
                            for(var i=0; i<arrLen; i++){
                            result +=   &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
                                            +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
                                            +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
                                            +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
                                        +&#39;</a>&#39;;
                        }                    // 如果没有数据
                    }else{                        // 锁定
                        me.lock();                        // 无数据
                        me.noData();
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $(&#39;.lists&#39;).append(result);                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});</script>

Salin selepas log masuk

示例二、加载顶部、底部

<script>
$(function(){
    // 页数
    var page = 0;    // 每页展示10个
    var size = 10;    // dropload
    $(&#39;.content&#39;).dropload({
        scrollArea : window,
        domUp : {
            domClass   : &#39;dropload-up&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新-自定义内容</p>&#39;,
            domUpdate  : &#39;<p class="dropload-update">↑释放更新-自定义内容</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;
        },
        domDown : {
            domClass   : &#39;dropload-down&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;,
            domNoData  : &#39;<p class="dropload-noData">暂无数据-自定义内容</p>&#39;
        },
        loadUpFn : function(me){
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;json/update.json&#39;,
                dataType: &#39;json&#39;,
                success: function(data){
                    var result = &#39;&#39;;                    
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                        +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                        +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                        +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                    +&#39;</a>&#39;;
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $(&#39;.lists&#39;).html(result);                        // 每次数据加载完，必须重置
                        me.resetload();                        // 重置页数，重新获取loadDownFn的数据
                        page = 0;                        // 解锁loadDownFn里锁定的情况
                        me.unlock();                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
            page++;            // 拼接HTML
            var result = &#39;&#39;;
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,
                dataType: &#39;json&#39;,
                success: function(data){
                    var arrLen = data.length;                    
                    if(arrLen > 0){                        for(var i=0; i<arrLen; i++){
                            result +=   &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
                                            +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
                                            +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
                                            +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
                                        +&#39;</a>&#39;;
                        }                    // 如果没有数据
                    }else{                        // 锁定
                        me.lock();                        // 无数据
                        me.noData();
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $(&#39;.lists&#39;).append(result);                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });
});
</script>

Salin selepas log masuk

示例三、多次加载

$(function(){
        //利用此写法，可以限制多次加载的个数。
    var timer;

    $(&#39;.header .ipt&#39;).on(&#39;input&#39;,function(){
        var _length = $(this).val();        // 如果输入值不是数字或者是空，就跳出
        if(isNaN(_length) || _length === &#39;&#39;){            
        return false;
        }
        clearTimeout(timer);
        timer = setTimeout(function(){//也可不用定时器
            // 清空内容
            $(&#39;.lists&#39;).html(&#39;&#39;);
            $(&#39;.dropload-down&#39;).remove();            
            var counter = 0;            // 每页展示4个
            var num = 4;            
            var pageStart = 0,pageEnd = 0;            // dropload
            $(&#39;.content&#39;).dropload({
                scrollArea : window,
                loadDownFn : function(me){
                    $.ajax({
                        type: &#39;GET&#39;,
                        url: &#39;json/more.json&#39;,
                        dataType: &#39;json&#39;,
                        success: function(data){
                            var result = &#39;&#39;;
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;                            
                            .for(var i = pageStart; i < pageEnd; i++){
                                result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                                +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                                +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                                +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                            +&#39;</a>&#39;;                                
                                            if((i + 1) >= _length || (i + 1) >= data.lists.length){                                    // 锁定
                                    me.lock();                                    // 无数据
                                    me.noData();                                    
                                    break;
                                }
                            }                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $(&#39;.lists&#39;).append(result);                                // 每次数据加载完，必须重置
                                me.resetload();
                            },1000);
                        },
                        error: function(xhr, type){
                            alert(&#39;Ajax error!&#39;);                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        },500);
    });

Salin selepas log masuk

示例四、固定布局，加载顶部、底部

$(function(){
    // 按钮操作
    $(&#39;.header .btn&#39;).on(&#39;click&#39;,function(){
        var $this = $(this);        
        if(!!$this.hasClass(&#39;lock&#39;)){
            $this.attr(&#39;class&#39;,&#39;btn unlock&#39;);
            $this.text(&#39;解锁&#39;);            // 锁定
            dropload.lock();
            $(&#39;.dropload-down&#39;).hide();
        }else{
            $this.attr(&#39;class&#39;,&#39;btn lock&#39;);
            $this.text(&#39;锁定&#39;);            // 解锁
            dropload.unlock();
            $(&#39;.dropload-down&#39;).show();
        }
    });    // dropload
    var dropload = $(&#39;.inner&#39;).dropload({
        domUp : {
            domClass   : &#39;dropload-up&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;,
            domUpdate  : &#39;<p class="dropload-update">↑释放更新</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;
        },
        domDown : {
            domClass   : &#39;dropload-down&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;,
            domNoData  : &#39;<p class="dropload-noData">暂无数据</p>&#39;
        },
        loadUpFn : function(me){
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;json/update.json&#39;,
                dataType: &#39;json&#39;,
                success: function(data){
                    var result = &#39;&#39;;                    
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                        +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                        +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                        +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                    +&#39;</a>&#39;;
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $(&#39;.lists&#39;).html(result);                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        },
        loadDownFn : function(me){
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;json/more.json&#39;,
                dataType: &#39;json&#39;,
                success: function(data){
                    var result = &#39;&#39;;                    
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                        +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                        +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                        +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                    +&#39;</a>&#39;;
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $(&#39;.lists&#39;).append(result);                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        }
    });
});

Salin selepas log masuk

Atas ialah kandungan terperinci 关于dropload.js使用方法 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7343

Tutorial Java

1627

Tutorial CakePHP

1352

Tutorial Laravel

1265

Tutorial PHP

1210

Tunjukkan Lagi

Related knowledge

Bagaimana untuk menggunakan alat pembaikan DirectX? Penggunaan terperinci alat pembaikan DirectX Mar 15, 2024 am 08:31 AM

Alat pembaikan DirectX ialah alat sistem profesional Fungsi utamanya adalah untuk mengesan status DirectX sistem semasa Jika keabnormalan ditemui, ia boleh dibaiki secara langsung. Mungkin terdapat ramai pengguna yang tidak tahu cara menggunakan alat pembaikan DirectX Mari kita lihat tutorial terperinci di bawah. 1. Gunakan perisian alat pembaikan untuk melakukan pengesanan pembaikan. 2. Jika ia menggesa bahawa terdapat masalah tidak normal dalam komponen C++ selepas pembaikan selesai, sila klik butang Batal dan kemudian klik bar menu Alat. 3. Klik butang Pilihan, pilih sambungan, dan klik butang Mulakan Sambungan. 4. Selepas pengembangan selesai, mengesan semula dan membaikinya. 5. Jika masalah masih tidak diselesaikan selepas operasi alat pembaikan selesai, anda boleh cuba menyahpasang dan memasang semula program yang melaporkan ralat.

Pengenalan kepada kod status HTTP 525: teroka definisi dan aplikasinya Feb 18, 2024 pm 10:12 PM

Pengenalan kepada kod status HTTP 525: Fahami definisi dan penggunaan kod status HTTP (HypertextTransferProtocol) 525 bermakna pelayan mempunyai ralat semasa proses jabat tangan SSL, mengakibatkan ketidakupayaan untuk mewujudkan sambungan selamat. Pelayan mengembalikan kod status ini apabila ralat berlaku semasa jabat tangan Keselamatan Lapisan Pengangkutan (TLS). Kod status ini termasuk dalam kategori ralat pelayan dan biasanya menunjukkan konfigurasi pelayan atau masalah persediaan. Apabila pelanggan cuba menyambung ke pelayan melalui HTTPS, pelayan tidak mempunyai

Cara menggunakan Baidu Netdisk-Cara menggunakan Baidu Netdisk Mar 04, 2024 pm 09:28 PM

Ramai rakan masih tidak tahu cara menggunakan Baidu Netdisk, jadi editor akan menerangkan cara menggunakan Baidu Netdisk di bawah Jika anda memerlukan, cepat dan lihat. Langkah 1: Log masuk terus selepas memasang Baidu Netdisk (seperti yang ditunjukkan dalam gambar Langkah 2: Kemudian pilih "Perkongsian Saya" dan "Senarai Pemindahan" mengikut arahan halaman (seperti yang ditunjukkan dalam gambar); Perkongsian Rakan", anda boleh berkongsi gambar dan fail terus dengan rakan (seperti yang ditunjukkan dalam gambar); Langkah 4: Kemudian pilih "Kongsi" dan kemudian pilih fail komputer atau fail cakera rangkaian (seperti yang ditunjukkan dalam gambar); Langkah Kelima 1: Kemudian anda boleh mencari rakan (seperti yang ditunjukkan dalam gambar) Langkah 6: Anda juga boleh mencari fungsi yang anda perlukan dalam "Function Treasure Box" (seperti yang ditunjukkan dalam gambar). Perkara di atas adalah pendapat editor

Belajar menyalin dan menampal dengan cepat Feb 18, 2024 pm 03:25 PM

Cara menggunakan kekunci pintasan salin-tampal Salin-tampal ialah operasi yang sering kita hadapi apabila menggunakan komputer setiap hari. Untuk meningkatkan kecekapan kerja, adalah sangat penting untuk menguasai kekunci pintasan salin dan tampal. Artikel ini akan memperkenalkan beberapa kekunci pintasan salin dan tampal yang biasa digunakan untuk membantu pembaca melaksanakan operasi salin dan tampal dengan lebih mudah. Kekunci pintasan salin: Ctrl+CCtrl+C ialah kekunci pintasan untuk menyalin Dengan menahan kekunci Ctrl dan kemudian menekan kekunci C, anda boleh menyalin teks, fail, gambar, dsb. ke papan keratan. Untuk menggunakan kekunci pintasan ini,

Apakah alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Mar 18, 2024 am 11:07 AM

Alat Pengaktifan KMS ialah alat perisian yang digunakan untuk mengaktifkan produk Microsoft Windows dan Office. KMS ialah singkatan kepada KeyManagementService, iaitu perkhidmatan pengurusan utama. Alat pengaktifan KMS mensimulasikan fungsi pelayan KMS supaya komputer boleh menyambung ke pelayan KMS maya untuk mengaktifkan produk Windows dan Office. Alat pengaktifan KMS bersaiz kecil dan berkuasa dalam fungsi Ia boleh diaktifkan secara kekal dengan satu klik Ia boleh mengaktifkan mana-mana versi sistem tetingkap dan mana-mana versi perisian Office tanpa disambungkan ke Internet dan alat pengaktifan Windows yang kerap dikemas kini Hari ini saya akan memperkenalkannya Biar saya memperkenalkan kepada anda kerja pengaktifan kms

Cara menggunakan alat pengaktifan Xiaoma win7 - Cara menggunakan alat pengaktifan Xiaoma win7 Mar 04, 2024 pm 06:16 PM

Saya percaya bahawa ramai pengguna menggunakan alat pengaktifan Xiaoma win7, tetapi adakah anda tahu cara menggunakan alat pengaktifan Xiaoma win7 Kemudian, editor akan membawakan kepada anda cara menggunakan alat pengaktifan Xiaoma win7 Bagi mereka yang berminat dengan ini? sila ke artikel berikut Jom lihat. Langkah pertama ialah pergi ke "Komputer Saya" selepas memasang semula sistem, klik "System Properties" di menu atas, dan semak status pengaktifan Windows. Dalam langkah kedua, klik untuk memuat turun alat pengaktifan win7 dalam talian dan klik untuk membukanya (terdapat banyak sumber tersedia di mana-mana). Langkah ketiga ialah membuka alat pengaktifan Xiaoma dan klik "Aktifkan Windows secara kekal". Langkah keempat ialah menunggu proses pengaktifan selesai pengaktifan. Langkah 5: Semak status pengaktifan Windows sekali lagi dan ketahui bahawa sistem telah diaktifkan.

Apakah PyCharm? Pengenalan fungsi dan penerangan terperinci tentang penggunaan Feb 20, 2024 am 09:21 AM

PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python profesional yang dibangunkan oleh JetBrains Ia menyediakan pembangun Python dengan fungsi dan alatan yang berkuasa, menjadikan penulisan kod Python lebih cekap dan mudah. PyCharm menyokong berbilang sistem pengendalian, termasuk Windows, macOS dan Linux, dan juga menyokong berbilang versi Python, dan menyediakan pelbagai fungsi pemalam dan sambungan untuk memudahkan pembangun menyesuaikan persekitaran IDE mengikut keperluan mereka sendiri. P

Cara menggabungkan sel menggunakan kekunci pintasan Feb 26, 2024 am 10:27 AM

Cara menggunakan kekunci pintasan untuk menggabungkan sel Dalam kerja harian, kita selalunya perlu mengedit dan memformat jadual. Menggabungkan sel ialah operasi biasa yang boleh menggabungkan berbilang sel bersebelahan ke dalam satu sel untuk meningkatkan keindahan jadual dan kesan paparan maklumat. Dalam perisian hamparan arus perdana seperti Microsoft Excel dan Helaian Google, operasi penggabungan sel adalah sangat mudah dan boleh dicapai melalui kekunci pintasan. Berikut akan memperkenalkan penggunaan kekunci pintasan untuk menggabungkan sel dalam kedua-dua perisian ini. wujud

See all articles