찾다

집 >웹 프론트엔드 >JS 튜토리얼 >dropload.js 사용 방법 정보

dropload.js 사용 방법 정보

一个新手
一个新手원래의
2017-10-20 11:15:1016638검색

첫 번째 단계는 dropload 플러그인을 다운로드하는 것입니다. dropload 플러그인 다운로드 주소의 공식 문서는 https://github.com/ximan/dropload입니다.
두 번째 단계는 dropload.css 및 dropload를 다운로드하는 것입니다. 다운로드한 dropload 플러그인의 .min.js 파일이 페이지에 도입되었습니다. note 또한 Jquery1.7 또는 Zepto 둘 중 하나를 선택하세요. 두 가지를 동시에 인용하지 마세요. jquery를 기반으로 구현되었습니다
세 번째 단계는 다음 코드를 페이지에 넣는 것입니다. 맨 아래에 주의하세요. 그렇지 않으면 드롭로드 플러그인이 높이를 얻을 수 없습니다

**基本代码结构**//#content为某个p的id  var dropload = $('#content').dropload({   
//scrollArea很关键，要不然加载更多不起作用  scrollArea : window,  
domUp : {  
    domClass   : 'dropload-up',  
    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);  
           }  
});

에서 전체 예제를 확인하세요. 수요

예시 1, 하단 로드

<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>

예시 2, 상단 및 하단 로드

<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>

예시 3, 다중 로드

$(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);
    });

예 4, 고정 레이아웃, 상단 및 하단 로드

$(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();
                }
            });
        }
    });
});

위 내용은 dropload.js 사용 방법 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：정규식의 \b 이해다음 기사：정규식의 \b 이해

관련 기사

더보기