自助购买VIP收藏本站将本站放到桌面
开启辅助访问 购买锦尚中国空间免费安装程序 请联系QQ278869155
源码论坛公告：本站是一个交流学习建站资源的社区论坛，旨在交流学习源码脚本等资源技术，欢迎大家投稿发言！ 【点击此处将锦尚放在桌面】

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步，快速开始

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛»论坛 › 网站源码(交流学习,共同进步) › 站长教程 › 关于dropload.js使用方法
返回列表 发新帖
查看: 8758|回复: 0
打印 上一主题 下一主题

[CSS/Html] 关于dropload.js使用方法

[复制链接]
欧阳锋

1175

主题

1564

帖子

9320

金币

超级版主

Rank: 8Rank: 8

积分
20328
跳转到指定楼层
1#
发表于 2022-5-23 15:50:39 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
第一步，下载dropload插件，dropload插件下载地址 官方文档：https://github.com/ximan/dropload

第二步，将下载好的dropload插件中的dropload.css，dropload.min.js文件引入到页面中，注意还要引入 Jquery1.7 以上 或者 Zepto 二选一，不要同时都引用，因为dropload是基于jquery实现的

第三步，将以下代码放到页面的最底部，注意是最底部，否则dropload插件获取不了高度
  1. **基本代码结构**//#content为某个p的id  var dropload = $('#content').dropload({   

  3. //scrollArea很关键，要不然加载更多不起作用  scrollArea : window,  

  5. domUp : {  

  7.     domClass   : 'dropload-up',  

  9.     domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',  

  11.     domUpdate  : '<p class="dropload-update">↑释放更新</p>',  

  13.     domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>'  },  

  15. domDown : {  

  17.     domClass   : 'dropload-down',  

  19.     domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',  

  21.     domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',  

  23.     domNoData  : '<p class="dropload-noData">暂无数据</p>'

  25.    },  

  27. loadUpFn : function(me){  

  29.         //下拉刷新需要调用的函数  

  31.         alert("下拉刷新需要调用的函数");  

  33.         //重置下拉刷新  

  35.         me.resetload();      

  37. },  

  39. loadDownFn : function(me){  

  41.         //上拉加载更多需要调用的函数  

  43.         alert("上拉加载更多需要调用的函数");  

  45.         //定时器函数,为了看出上拉加载更多效果  

  47.             setTimeout(function(){  

  49.                 // 每次数据加载完，必须重置  

  51.                     me.resetload();  

  53.                 },1000);  

  55.            }  

  57. });
复制代码


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

示例一、加载底部

  1. <script>$(function(){

  3.     // 页数

  5.     var page = 0;    // 每页展示5个

  7.     var size = 5;    // dropload调用

  9.     $('.content').dropload({

  11.         scrollArea : window,

  13.         loadDownFn : function(me){

  15.             page++;            // 拼接HTML

  17.             var result = '';

  19.             $.ajax({

  21.                 type: 'GET',

  23.                 url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,//配合后台接口

  25.                 dataType: 'json',

  27.                 success: function(data){

  29.                     var arrLen = data.length;                    

  31.                         if(arrLen > 0){                        

  33.                             for(var i=0; i<arrLen; i++){

  35.                             result +=   '<a class="item opacity" href="'+data[i].link+'">'

  37.                                             +'<img src="'+data[i].pic+'" alt="">'

  39.                                             +'<h3>'+data[i].title+'</h3>'

  41.                                             +'<span class="date">'+data[i].date+'</span>'

  43.                                         +'</a>';

  45.                         }                    // 如果没有数据

  47.                     }else{                        // 锁定

  49.                         me.lock();                        // 无数据

  51.                         me.noData();

  53.                     }                    // 为了测试，延迟1秒加载

  55.                     setTimeout(function(){

  57.                         // 插入数据到页面，放到最后面

  59.                         $('.lists').append(result);                        // 每次数据插入，必须重置

  61.                         me.resetload();

  63.                     },1000);

  65.                 },

  67.                 error: function(xhr, type){

  69.                     alert('Ajax error!');                    // 即使加载出错，也得重置

  71.                     me.resetload();

  73.                 }

  75.             });

  77.         }

  79.     });

  81. });</script>
复制代码

示例二、加载顶部、底部

  1. <script>

  3. $(function(){

  5.     // 页数

  7.     var page = 0;    // 每页展示10个

  9.     var size = 10;    // dropload

  11.     $('.content').dropload({

  13.         scrollArea : window,

  15.         domUp : {

  17.             domClass   : 'dropload-up',

  19.             domRefresh : '<p class="dropload-refresh">↓下拉刷新-自定义内容</p>',

  21.             domUpdate  : '<p class="dropload-update">↑释放更新-自定义内容</p>',

  23.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>'

  25.         },

  27.         domDown : {

  29.             domClass   : 'dropload-down',

  31.             domRefresh : '<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>',

  33.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>',

  35.             domNoData  : '<p class="dropload-noData">暂无数据-自定义内容</p>'

  37.         },

  39.         loadUpFn : function(me){

  41.             $.ajax({

  43.                 type: 'GET',

  45.                 url: 'json/update.json',

  47.                 dataType: 'json',

  49.                 success: function(data){

  51.                     var result = '';                    

  53.                     for(var i = 0; i < data.lists.length; i++){

  55.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'

  57.                                         +'<img src="'+data.lists[i].pic+'" alt="">'

  59.                                         +'<h3>'+data.lists[i].title+'</h3>'

  61.                                         +'<span class="date">'+data.lists[i].date+'</span>'

  63.                                     +'</a>';

  65.                     }                    // 为了测试，延迟1秒加载

  67.                     setTimeout(function(){

  69.                         $('.lists').html(result);                        // 每次数据加载完，必须重置

  71.                         me.resetload();                        // 重置页数，重新获取loadDownFn的数据

  73.                         page = 0;                        // 解锁loadDownFn里锁定的情况

  75.                         me.unlock();                        me.noData(false);

  77.                     },1000);

  79.                 },

  81.                 error: function(xhr, type){

  83.                     alert('Ajax error!');                    // 即使加载出错，也得重置

  85.                     me.resetload();

  87.                 }

  89.             });

  91.         },

  93.         loadDownFn : function(me){

  95.             page++;            // 拼接HTML

  97.             var result = '';

  99.             $.ajax({

  101.                 type: 'GET',

  103.                 url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,

  105.                 dataType: 'json',

  107.                 success: function(data){

  109.                     var arrLen = data.length;                    

  111.                     if(arrLen > 0){                        for(var i=0; i<arrLen; i++){

  113.                             result +=   '<a class="item opacity" href="'+data[i].link+'">'

  115.                                             +'<img src="'+data[i].pic+'" alt="">'

  117.                                             +'<h3>'+data[i].title+'</h3>'

  119.                                             +'<span class="date">'+data[i].date+'</span>'

  121.                                         +'</a>';

  123.                         }                    // 如果没有数据

  125.                     }else{                        // 锁定

  127.                         me.lock();                        // 无数据

  129.                         me.noData();

  131.                     }                    // 为了测试，延迟1秒加载

  133.                     setTimeout(function(){

  135.                         // 插入数据到页面，放到最后面

  137.                         $('.lists').append(result);                        // 每次数据插入，必须重置

  139.                         me.resetload();

  141.                     },1000);

  143.                 },

  145.                 error: function(xhr, type){

  147.                     alert('Ajax error!');                    // 即使加载出错，也得重置

  149.                     me.resetload();

  151.                 }

  153.             });

  155.         },

  157.         threshold : 50

  159.     });

  161. });

  163. </script>
复制代码


示例三、多次加载

$(function(){

        //利用此写法，可以限制多次加载的个数。

    var timer;



    $('.header .ipt').on('input',function(){

        var _length = $(this).val();        // 如果输入值不是数字或者是空，就跳出

        if(isNaN(_length) || _length === ''){            

        return false;

        }

        clearTimeout(timer);

        timer = setTimeout(function(){//也可不用定时器

            // 清空内容

            $('.lists').html('');

            $('.dropload-down').remove();            

            var counter = 0;            // 每页展示4个

            var num = 4;            

            var pageStart = 0,pageEnd = 0;            // dropload

            $('.content').dropload({

                scrollArea : window,

                loadDownFn : function(me){

                    $.ajax({

                        type: 'GET',

                        url: 'json/more.json',

                        dataType: 'json',

                        success: function(data){

                            var result = '';

                            counter++;

                            pageEnd = num * counter;

                            pageStart = pageEnd - num;                           

                            .for(var i = pageStart; i < pageEnd; i++){

                                result +=   '<a class="item opacity" href="'+data.lists.link+'">'

                                                +'<img src="'+data.lists.pic+'" alt="">'

                                                +'<h3>'+data.lists.title+'</h3>'

                                                +'<span class="date">'+data.lists.date+'</span>'

                                            +'</a>';                                

                                            if((i + 1) >= _length || (i + 1) >= data.lists.length){                                    // 锁定

                                    me.lock();                                    // 无数据

                                    me.noData();                                    

                                    break;

                                }

                            }                            // 为了测试，延迟1秒加载

                            setTimeout(function(){

                                $('.lists').append(result);                                // 每次数据加载完，必须重置

                                me.resetload();

                            },1000);

                        },

                        error: function(xhr, type){

                            alert('Ajax error!');                            // 即使加载出错，也得重置

                            me.resetload();

                        }

                    });

                }

            });

        },500);

    });

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

  1. $(function(){

  3.     // 按钮操作

  5.     $('.header .btn').on('click',function(){

  7.         var $this = $(this);        

  9.         if(!!$this.hasClass('lock')){

  11.             $this.attr('class','btn unlock');

  13.             $this.text('解锁');            // 锁定

  15.             dropload.lock();

  17.             $('.dropload-down').hide();

  19.         }else{

  21.             $this.attr('class','btn lock');

  23.             $this.text('锁定');            // 解锁

  25.             dropload.unlock();

  27.             $('.dropload-down').show();

  29.         }

  31.     });    // dropload

  33.     var dropload = $('.inner').dropload({

  35.         domUp : {

  37.             domClass   : 'dropload-up',

  39.             domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',

  41.             domUpdate  : '<p class="dropload-update">↑释放更新</p>',

  43.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>'

  45.         },

  47.         domDown : {

  49.             domClass   : 'dropload-down',

  51.             domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',

  53.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',

  55.             domNoData  : '<p class="dropload-noData">暂无数据</p>'

  57.         },

  59.         loadUpFn : function(me){

  61.             $.ajax({

  63.                 type: 'GET',

  65.                 url: 'json/update.json',

  67.                 dataType: 'json',

  69.                 success: function(data){

  71.                     var result = '';                    

  73.                     for(var i = 0; i < data.lists.length; i++){

  75.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'

  77.                                         +'<img src="'+data.lists[i].pic+'" alt="">'

  79.                                         +'<h3>'+data.lists[i].title+'</h3>'

  81.                                         +'<span class="date">'+data.lists[i].date+'</span>'

  83.                                     +'</a>';

  85.                     }                    // 为了测试，延迟1秒加载

  87.                     setTimeout(function(){

  89.                         $('.lists').html(result);                        // 每次数据加载完，必须重置

  91.                         dropload.resetload();

  93.                     },1000);

  95.                 },

  97.                 error: function(xhr, type){

  99.                     alert('Ajax error!');                    // 即使加载出错，也得重置

  101.                     dropload.resetload();

  103.                 }

  105.             });

  107.         },

  109.         loadDownFn : function(me){

  111.             $.ajax({

  113.                 type: 'GET',

  115.                 url: 'json/more.json',

  117.                 dataType: 'json',

  119.                 success: function(data){

  121.                     var result = '';                    

  123.                     for(var i = 0; i < data.lists.length; i++){

  125.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'

  127.                                         +'<img src="'+data.lists[i].pic+'" alt="">'

  129.                                         +'<h3>'+data.lists[i].title+'</h3>'

  131.                                         +'<span class="date">'+data.lists[i].date+'</span>'

  133.                                     +'</a>';

  135.                     }                    // 为了测试，延迟1秒加载

  137.                     setTimeout(function(){

  139.                         $('.lists').append(result);                        // 每次数据加载完，必须重置

  141.                         dropload.resetload();

  143.                     },1000);

  145.                 },

  147.                 error: function(xhr, type){

  149.                     alert('Ajax error!');                    // 即使加载出错，也得重置

  151.                     dropload.resetload();

  153.                 }

  155.             });

  157.         }

  159.     });

  161. });
复制代码

以上就是关于dropload.js使用方法 的详细内容

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-11-23 06:37 , Processed in 0.106582 second(s), 24 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问：IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明