About how to use dropload.js-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

About how to use dropload.js

一个新手

Oct 20, 2017 am 11:15 AM

javascriptInstructions

The first step is to download the dropload plug-in. The official document of the dropload plug-in download address is: https://github.com/ximan/dropload
The second step is to download the dropload.css in the downloaded dropload plug-in, dropload. The min.js file is introduced into the page. Note Also introduce Jquery1.7 or Zepto. Choose one of the two, do not quote both at the same time, because dropload is based on jquery Implementation
The third step is to put the following code at the bottom of the page. Pay attention to the bottom, otherwise the dropload plug-in will not be able to obtain the height.

**基本代码结构**//#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);  
           }  
});

Some complete examples on demand Just check it

Example 1, load the bottom

<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="/static/imghwm/default1.png"  data-src="&#39;+data[i].pic+&#39;"  class="lazy"   alt="">&#39;
                                            +&#39;<h3 id="data-i-title">&#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>

Example 2, load the top, bottom

<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="/static/imghwm/default1.png"  data-src="&#39;+data.lists[i].pic+&#39;"  class="lazy"   alt="">&#39;
                                        +&#39;<h3 id="data-lists-i-title">&#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="/static/imghwm/default1.png"  data-src="&#39;+data[i].pic+&#39;"  class="lazy"   alt="">&#39;
                                            +&#39;<h3 id="data-i-title">&#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>

Example 3, load multiple times

$(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="/static/imghwm/default1.png"  data-src="&#39;+data.lists[i].pic+&#39;"  class="lazy"   alt="">&#39;
                                                +&#39;<h3 id="data-lists-i-title">&#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);
    });

Example 4 , fixed layout, loading top and bottom

$(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="/static/imghwm/default1.png"  data-src="&#39;+data.lists[i].pic+&#39;"  class="lazy"   alt="">&#39;
                                        +&#39;<h3 id="data-lists-i-title">&#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="/static/imghwm/default1.png"  data-src="&#39;+data.lists[i].pic+&#39;"  class="lazy"   alt="">&#39;
                                        +&#39;<h3 id="data-lists-i-title">&#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();
                }
            });
        }
    });
});

The above is the detailed content of About how to use dropload.js. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

20+道必知必会的Vue面试题（附答案解析）Apr 06, 2021 am 09:41 AM

本篇文章整理了20+Vue面试题分享给大家，同时附上答案解析。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

WebStorm Mac version

Useful JavaScript development tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Hot Topics

Where is the login entrance for gmail email?

7364

1628

1353

1265

1214