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

标题: 关于dropload.js使用方法 [打印本页]

---

作者: 欧阳锋    时间: 2022-5-23 15:50
标题: 关于dropload.js使用方法
第一步，下载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. 
   
3. //scrollArea很关键，要不然加载更多不起作用  scrollArea : window,  
   
4. 
   
5. domUp : {  
   
6. 
   
7.     domClass   : 'dropload-up',  
   
8. 
   
9.     domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',  
   
10. 
    
11.     domUpdate  : '<p class="dropload-update">↑释放更新</p>',  
    
12. 
    
13.     domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>'  },  
    
14. 
    
15. domDown : {  
    
16. 
    
17.     domClass   : 'dropload-down',  
    
18. 
    
19.     domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',  
    
20. 
    
21.     domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',  
    
22. 
    
23.     domNoData  : '<p class="dropload-noData">暂无数据</p>'
    
24. 
    
25.    },  
    
26. 
    
27. loadUpFn : function(me){  
    
28. 
    
29.         //下拉刷新需要调用的函数  
    
30. 
    
31.         alert("下拉刷新需要调用的函数");  
    
32. 
    
33.         //重置下拉刷新  
    
34. 
    
35.         me.resetload();      
    
36. 
    
37. },  
    
38. 
    
39. loadDownFn : function(me){  
    
40. 
    
41.         //上拉加载更多需要调用的函数  
    
42. 
    
43.         alert("上拉加载更多需要调用的函数");  
    
44. 
    
45.         //定时器函数,为了看出上拉加载更多效果  
    
46. 
    
47.             setTimeout(function(){  
    
48. 
    
49.                 // 每次数据加载完，必须重置  
    
50. 
    
51.                     me.resetload();  
    
52. 
    
53.                 },1000);  
    
54. 
    
55.            }  
    
56. 
    
57. });

复制代码

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

示例一、加载底部

1. <script>$(function(){
   
2. 
   
3.     // 页数
   
4. 
   
5.     var page = 0;    // 每页展示5个
   
6. 
   
7.     var size = 5;    // dropload调用
   
8. 
   
9.     $('.content').dropload({
   
10. 
    
11.         scrollArea : window,
    
12. 
    
13.         loadDownFn : function(me){
    
14. 
    
15.             page++;            // 拼接HTML
    
16. 
    
17.             var result = '';
    
18. 
    
19.             $.ajax({
    
20. 
    
21.                 type: 'GET',
    
22. 
    
23.                 url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,//配合后台接口
    
24. 
    
25.                 dataType: 'json',
    
26. 
    
27.                 success: function(data){
    
28. 
    
29.                     var arrLen = data.length;                    
    
30. 
    
31.                         if(arrLen > 0){                        
    
32. 
    
33.                             for(var i=0; i<arrLen; i++){
    
34. 
    
35.                             result +=   '<a class="item opacity" href="'+data[i].link+'">'
    
36. 
    
37.                                             +'<img src="'+data[i].pic+'" alt="">'
    
38. 
    
39.                                             +'<h3>'+data[i].title+'</h3>'
    
40. 
    
41.                                             +'<span class="date">'+data[i].date+'</span>'
    
42. 
    
43.                                         +'</a>';
    
44. 
    
45.                         }                    // 如果没有数据
    
46. 
    
47.                     }else{                        // 锁定
    
48. 
    
49.                         me.lock();                        // 无数据
    
50. 
    
51.                         me.noData();
    
52. 
    
53.                     }                    // 为了测试，延迟1秒加载
    
54. 
    
55.                     setTimeout(function(){
    
56. 
    
57.                         // 插入数据到页面，放到最后面
    
58. 
    
59.                         $('.lists').append(result);                        // 每次数据插入，必须重置
    
60. 
    
61.                         me.resetload();
    
62. 
    
63.                     },1000);
    
64. 
    
65.                 },
    
66. 
    
67.                 error: function(xhr, type){
    
68. 
    
69.                     alert('Ajax error!');                    // 即使加载出错，也得重置
    
70. 
    
71.                     me.resetload();
    
72. 
    
73.                 }
    
74. 
    
75.             });
    
76. 
    
77.         }
    
78. 
    
79.     });
    
80. 
    
81. });</script>

复制代码

示例二、加载顶部、底部

1. <script>
   
2. 
   
3. $(function(){
   
4. 
   
5.     // 页数
   
6. 
   
7.     var page = 0;    // 每页展示10个
   
8. 
   
9.     var size = 10;    // dropload
   
10. 
    
11.     $('.content').dropload({
    
12. 
    
13.         scrollArea : window,
    
14. 
    
15.         domUp : {
    
16. 
    
17.             domClass   : 'dropload-up',
    
18. 
    
19.             domRefresh : '<p class="dropload-refresh">↓下拉刷新-自定义内容</p>',
    
20. 
    
21.             domUpdate  : '<p class="dropload-update">↑释放更新-自定义内容</p>',
    
22. 
    
23.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>'
    
24. 
    
25.         },
    
26. 
    
27.         domDown : {
    
28. 
    
29.             domClass   : 'dropload-down',
    
30. 
    
31.             domRefresh : '<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>',
    
32. 
    
33.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>',
    
34. 
    
35.             domNoData  : '<p class="dropload-noData">暂无数据-自定义内容</p>'
    
36. 
    
37.         },
    
38. 
    
39.         loadUpFn : function(me){
    
40. 
    
41.             $.ajax({
    
42. 
    
43.                 type: 'GET',
    
44. 
    
45.                 url: 'json/update.json',
    
46. 
    
47.                 dataType: 'json',
    
48. 
    
49.                 success: function(data){
    
50. 
    
51.                     var result = '';                    
    
52. 
    
53.                     for(var i = 0; i < data.lists.length; i++){
    
54. 
    
55.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
    
56. 
    
57.                                         +'<img src="'+data.lists[i].pic+'" alt="">'
    
58. 
    
59.                                         +'<h3>'+data.lists[i].title+'</h3>'
    
60. 
    
61.                                         +'<span class="date">'+data.lists[i].date+'</span>'
    
62. 
    
63.                                     +'</a>';
    
64. 
    
65.                     }                    // 为了测试，延迟1秒加载
    
66. 
    
67.                     setTimeout(function(){
    
68. 
    
69.                         $('.lists').html(result);                        // 每次数据加载完，必须重置
    
70. 
    
71.                         me.resetload();                        // 重置页数，重新获取loadDownFn的数据
    
72. 
    
73.                         page = 0;                        // 解锁loadDownFn里锁定的情况
    
74. 
    
75.                         me.unlock();                        me.noData(false);
    
76. 
    
77.                     },1000);
    
78. 
    
79.                 },
    
80. 
    
81.                 error: function(xhr, type){
    
82. 
    
83.                     alert('Ajax error!');                    // 即使加载出错，也得重置
    
84. 
    
85.                     me.resetload();
    
86. 
    
87.                 }
    
88. 
    
89.             });
    
90. 
    
91.         },
    
92. 
    
93.         loadDownFn : function(me){
    
94. 
    
95.             page++;            // 拼接HTML
    
96. 
    
97.             var result = '';
    
98. 
    
99.             $.ajax({
    
100. 
     
101.                 type: 'GET',
     
102. 
     
103.                 url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
     
104. 
     
105.                 dataType: 'json',
     
106. 
     
107.                 success: function(data){
     
108. 
     
109.                     var arrLen = data.length;                    
     
110. 
     
111.                     if(arrLen > 0){                        for(var i=0; i<arrLen; i++){
     
112. 
     
113.                             result +=   '<a class="item opacity" href="'+data[i].link+'">'
     
114. 
     
115.                                             +'<img src="'+data[i].pic+'" alt="">'
     
116. 
     
117.                                             +'<h3>'+data[i].title+'</h3>'
     
118. 
     
119.                                             +'<span class="date">'+data[i].date+'</span>'
     
120. 
     
121.                                         +'</a>';
     
122. 
     
123.                         }                    // 如果没有数据
     
124. 
     
125.                     }else{                        // 锁定
     
126. 
     
127.                         me.lock();                        // 无数据
     
128. 
     
129.                         me.noData();
     
130. 
     
131.                     }                    // 为了测试，延迟1秒加载
     
132. 
     
133.                     setTimeout(function(){
     
134. 
     
135.                         // 插入数据到页面，放到最后面
     
136. 
     
137.                         $('.lists').append(result);                        // 每次数据插入，必须重置
     
138. 
     
139.                         me.resetload();
     
140. 
     
141.                     },1000);
     
142. 
     
143.                 },
     
144. 
     
145.                 error: function(xhr, type){
     
146. 
     
147.                     alert('Ajax error!');                    // 即使加载出错，也得重置
     
148. 
     
149.                     me.resetload();
     
150. 
     
151.                 }
     
152. 
     
153.             });
     
154. 
     
155.         },
     
156. 
     
157.         threshold : 50
     
158. 
     
159.     });
     
160. 
     
161. });
     
162. 
     
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(){
   
2. 
   
3.     // 按钮操作
   
4. 
   
5.     $('.header .btn').on('click',function(){
   
6. 
   
7.         var $this = $(this);        
   
8. 
   
9.         if(!!$this.hasClass('lock')){
   
10. 
    
11.             $this.attr('class','btn unlock');
    
12. 
    
13.             $this.text('解锁');            // 锁定
    
14. 
    
15.             dropload.lock();
    
16. 
    
17.             $('.dropload-down').hide();
    
18. 
    
19.         }else{
    
20. 
    
21.             $this.attr('class','btn lock');
    
22. 
    
23.             $this.text('锁定');            // 解锁
    
24. 
    
25.             dropload.unlock();
    
26. 
    
27.             $('.dropload-down').show();
    
28. 
    
29.         }
    
30. 
    
31.     });    // dropload
    
32. 
    
33.     var dropload = $('.inner').dropload({
    
34. 
    
35.         domUp : {
    
36. 
    
37.             domClass   : 'dropload-up',
    
38. 
    
39.             domRefresh : '<p class="dropload-refresh">↓下拉刷新</p>',
    
40. 
    
41.             domUpdate  : '<p class="dropload-update">↑释放更新</p>',
    
42. 
    
43.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>'
    
44. 
    
45.         },
    
46. 
    
47.         domDown : {
    
48. 
    
49.             domClass   : 'dropload-down',
    
50. 
    
51.             domRefresh : '<p class="dropload-refresh">↑上拉加载更多</p>',
    
52. 
    
53.             domLoad    : '<p class="dropload-load"><span class="loading"></span>加载中...</p>',
    
54. 
    
55.             domNoData  : '<p class="dropload-noData">暂无数据</p>'
    
56. 
    
57.         },
    
58. 
    
59.         loadUpFn : function(me){
    
60. 
    
61.             $.ajax({
    
62. 
    
63.                 type: 'GET',
    
64. 
    
65.                 url: 'json/update.json',
    
66. 
    
67.                 dataType: 'json',
    
68. 
    
69.                 success: function(data){
    
70. 
    
71.                     var result = '';                    
    
72. 
    
73.                     for(var i = 0; i < data.lists.length; i++){
    
74. 
    
75.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
    
76. 
    
77.                                         +'<img src="'+data.lists[i].pic+'" alt="">'
    
78. 
    
79.                                         +'<h3>'+data.lists[i].title+'</h3>'
    
80. 
    
81.                                         +'<span class="date">'+data.lists[i].date+'</span>'
    
82. 
    
83.                                     +'</a>';
    
84. 
    
85.                     }                    // 为了测试，延迟1秒加载
    
86. 
    
87.                     setTimeout(function(){
    
88. 
    
89.                         $('.lists').html(result);                        // 每次数据加载完，必须重置
    
90. 
    
91.                         dropload.resetload();
    
92. 
    
93.                     },1000);
    
94. 
    
95.                 },
    
96. 
    
97.                 error: function(xhr, type){
    
98. 
    
99.                     alert('Ajax error!');                    // 即使加载出错，也得重置
    
100. 
     
101.                     dropload.resetload();
     
102. 
     
103.                 }
     
104. 
     
105.             });
     
106. 
     
107.         },
     
108. 
     
109.         loadDownFn : function(me){
     
110. 
     
111.             $.ajax({
     
112. 
     
113.                 type: 'GET',
     
114. 
     
115.                 url: 'json/more.json',
     
116. 
     
117.                 dataType: 'json',
     
118. 
     
119.                 success: function(data){
     
120. 
     
121.                     var result = '';                    
     
122. 
     
123.                     for(var i = 0; i < data.lists.length; i++){
     
124. 
     
125.                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
     
126. 
     
127.                                         +'<img src="'+data.lists[i].pic+'" alt="">'
     
128. 
     
129.                                         +'<h3>'+data.lists[i].title+'</h3>'
     
130. 
     
131.                                         +'<span class="date">'+data.lists[i].date+'</span>'
     
132. 
     
133.                                     +'</a>';
     
134. 
     
135.                     }                    // 为了测试，延迟1秒加载
     
136. 
     
137.                     setTimeout(function(){
     
138. 
     
139.                         $('.lists').append(result);                        // 每次数据加载完，必须重置
     
140. 
     
141.                         dropload.resetload();
     
142. 
     
143.                     },1000);
     
144. 
     
145.                 },
     
146. 
     
147.                 error: function(xhr, type){
     
148. 
     
149.                     alert('Ajax error!');                    // 即使加载出错，也得重置
     
150. 
     
151.                     dropload.resetload();
     
152. 
     
153.                 }
     
154. 
     
155.             });
     
156. 
     
157.         }
     
158. 
     
159.     });
     
160. 
     
161. });

复制代码

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

---

欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/)

Powered by Discuz! X3.3