源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 8634|回复: 0

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

[复制链接]

1175

主题

1564

帖子

9020

金币

超级版主

Rank: 8Rank: 8

积分
19728
发表于 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({   

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

  3. domUp : {  

  4.     domClass   : 'dropload-up',  

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

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

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

  8. domDown : {  

  9.     domClass   : 'dropload-down',  

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

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

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

  13.    },  

  14. loadUpFn : function(me){  

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

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

  17.         //重置下拉刷新  

  18.         me.resetload();      

  19. },  

  20. loadDownFn : function(me){  

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

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

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

  24.             setTimeout(function(){  

  25.                 // 每次数据加载完,必须重置  

  26.                     me.resetload();  

  27.                 },1000);  

  28.            }  

  29. });
复制代码


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

示例一、加载底部

  1. <script>$(function(){

  2.     // 页数

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

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

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

  6.         scrollArea : window,

  7.         loadDownFn : function(me){

  8.             page++;            // 拼接HTML

  9.             var result = '';

  10.             $.ajax({

  11.                 type: 'GET',

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

  13.                 dataType: 'json',

  14.                 success: function(data){

  15.                     var arrLen = data.length;                    

  16.                         if(arrLen > 0){                        

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

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

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

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

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

  22.                                         +'</a>';

  23.                         }                    // 如果没有数据

  24.                     }else{                        // 锁定

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

  26.                         me.noData();

  27.                     }                    // 为了测试,延迟1秒加载

  28.                     setTimeout(function(){

  29.                         // 插入数据到页面,放到最后面

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

  31.                         me.resetload();

  32.                     },1000);

  33.                 },

  34.                 error: function(xhr, type){

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

  36.                     me.resetload();

  37.                 }

  38.             });

  39.         }

  40.     });

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

示例二、加载顶部、底部

  1. <script>

  2. $(function(){

  3.     // 页数

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

  5.     var size = 10;    // dropload

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

  7.         scrollArea : window,

  8.         domUp : {

  9.             domClass   : 'dropload-up',

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

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

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

  13.         },

  14.         domDown : {

  15.             domClass   : 'dropload-down',

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

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

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

  19.         },

  20.         loadUpFn : function(me){

  21.             $.ajax({

  22.                 type: 'GET',

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

  24.                 dataType: 'json',

  25.                 success: function(data){

  26.                     var result = '';                    

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

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

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

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

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

  32.                                     +'</a>';

  33.                     }                    // 为了测试,延迟1秒加载

  34.                     setTimeout(function(){

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

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

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

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

  39.                     },1000);

  40.                 },

  41.                 error: function(xhr, type){

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

  43.                     me.resetload();

  44.                 }

  45.             });

  46.         },

  47.         loadDownFn : function(me){

  48.             page++;            // 拼接HTML

  49.             var result = '';

  50.             $.ajax({

  51.                 type: 'GET',

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

  53.                 dataType: 'json',

  54.                 success: function(data){

  55.                     var arrLen = data.length;                    

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

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

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

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

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

  61.                                         +'</a>';

  62.                         }                    // 如果没有数据

  63.                     }else{                        // 锁定

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

  65.                         me.noData();

  66.                     }                    // 为了测试,延迟1秒加载

  67.                     setTimeout(function(){

  68.                         // 插入数据到页面,放到最后面

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

  70.                         me.resetload();

  71.                     },1000);

  72.                 },

  73.                 error: function(xhr, type){

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

  75.                     me.resetload();

  76.                 }

  77.             });

  78.         },

  79.         threshold : 50

  80.     });

  81. });

  82. </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(){

  2.     // 按钮操作

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

  4.         var $this = $(this);        

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

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

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

  8.             dropload.lock();

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

  10.         }else{

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

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

  13.             dropload.unlock();

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

  15.         }

  16.     });    // dropload

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

  18.         domUp : {

  19.             domClass   : 'dropload-up',

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

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

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

  23.         },

  24.         domDown : {

  25.             domClass   : 'dropload-down',

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

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

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

  29.         },

  30.         loadUpFn : function(me){

  31.             $.ajax({

  32.                 type: 'GET',

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

  34.                 dataType: 'json',

  35.                 success: function(data){

  36.                     var result = '';                    

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

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

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

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

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

  42.                                     +'</a>';

  43.                     }                    // 为了测试,延迟1秒加载

  44.                     setTimeout(function(){

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

  46.                         dropload.resetload();

  47.                     },1000);

  48.                 },

  49.                 error: function(xhr, type){

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

  51.                     dropload.resetload();

  52.                 }

  53.             });

  54.         },

  55.         loadDownFn : function(me){

  56.             $.ajax({

  57.                 type: 'GET',

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

  59.                 dataType: 'json',

  60.                 success: function(data){

  61.                     var result = '';                    

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

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

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

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

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

  67.                                     +'</a>';

  68.                     }                    // 为了测试,延迟1秒加载

  69.                     setTimeout(function(){

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

  71.                         dropload.resetload();

  72.                     },1000);

  73.                 },

  74.                 error: function(xhr, type){

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

  76.                     dropload.resetload();

  77.                 }

  78.             });

  79.         }

  80.     });

  81. });
复制代码

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

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

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

GMT+8, 2024-10-15 04:30 , Processed in 0.387801 second(s), 25 queries .

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

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