H__D  
【Web】移动端下拉刷新、上拉加载更多插件

　　移动网站中常常有的功能：列表的下拉刷新、上拉加载更多

　　本例介绍一种简单使用的移动端下拉刷新、上拉加载更多插件，下载及参考地址：https://github.com/ximan/dropload

插件依赖

　　Zepto 或者 jQuery 1.7以上版本，推荐jQuery 2.x版本（二者不要同时引用）
　　Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）

使用方法

　　引入插件

1 <link rel="stylesheet" href="css/dropload.css">
2 <script src="js/dropload.min.js"></script>

　　初始化插件

 1 $('.element').dropload({
 2     scrollArea : window,
 3     loadDownFn : function(me){
 4         $.ajax({
 5             type: 'GET',
 6             url: 'json/more.json',
 7             dataType: 'json',
 8             success: function(data){
 9                 alert(data);
10                 // 每次数据加载完，必须重置
11                 me.resetload();
12             },
13             error: function(xhr, type){
14                 alert('Ajax error!');
15                 // 即使加载出错，也得重置
16                 me.resetload();
17             }
18         });
19     }
20 });

参数列表

 

参数说明默认值可填值
scrollArea 滑动区域 绑定元素自身 window
domUp 上方DOM {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load">○加载中...</div>'
}		 数组
domDown 下方DOM {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load">○加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
}		 数组
autoLoad 自动加载 true true和false
distance 拉动距离 50 数字
threshold 提前加载距离 加载区高度2/3 正整数
loadUpFn 上方function 空 function(me){
//你的代码
me.resetload();
}
loadDownFn 下方function 空 function(me){
//你的代码
me.resetload();
}

　　API

暴露一些功能，可以让dropload更灵活的使用

lock() 锁定dropload

参数说明
lock() 智能锁定，锁定上一次加载的方向
lock('up') 锁定上方
lock('down') 锁定下方

unlock() 解锁dropload

noData() 无数据

参数说明
noData() 无数据
noData(true) 无数据
noData(false) 有数据

resetload() 重置。每次数据加载完，必须重置

　完整实例

  1 <!doctype html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
  5     <title>移动端下拉刷新、上拉加载更多插件 </title>
  6     <!-- UC强制全屏 -->
  7     <meta name="full-screen" content="yes">
  8     <!-- QQ强制全屏 -->
  9     <meta name="x5-fullscreen" content="true">
 10     <style>
 11     *{
 12         margin: 0;
 13         padding:0;
 14         -webkit-tap-highlight-color:rgba(0,0,0,0);
 15         -webkit-text-size-adjust:none;
 16     }
 17     html{
 18         font-size:10px;
 19     }
 20     body{
 21         background-color: #f5f5f5;
 22         font-size: 1.2em;
 23     }
 24     .header{
 25         height: 44px;
 26         line-height: 44px;
 27         border-bottom: 1px solid #ccc;
 28         background-color: #eee;
 29     }
 30     .header h1{
 31         text-align: center;
 32         font-size: 2rem;
 33         font-weight: normal;
 34     }
 35     .content{
 36         max-width: 640px;
 37         margin: 0 auto;
 38         background-color: #fff;
 39     }
 40     .content .item{
 41         display: -webkit-box;
 42         display: -webkit-flex;
 43         display: -ms-flexbox;
 44         display: flex;
 45         -ms-flex-align:center;
 46         -webkit-box-align:center;
 47         box-align:center;
 48         -webkit-align-items:center;
 49         align-items:center;
 50         padding:3.125%;
 51         border-bottom: 1px solid #ddd;
 52         color: #333;
 53         text-decoration: none;
 54     }
 55     .content .item img{
 56         display: block;
 57         width: 40px;
 58         height: 40px;
 59         border:1px solid #ddd;
 60     }
 61     .content .item h3{
 62         display: block;
 63         -webkit-box-flex: 1;
 64         -webkit-flex: 1;
 65         -ms-flex: 1;
 66         flex: 1;
 67         width: 100%;
 68         max-height: 40px;
 69         overflow: hidden;
 70         line-height: 20px;
 71         margin: 0 10px;
 72         font-size: 1.2rem;
 73     }
 74     .content .item .date{
 75         display: block;
 76         height: 20px;
 77         line-height: 20px;
 78         color: #999;
 79     }
 80     .opacity{
 81         -webkit-animation: opacity 0.3s linear;
 82         animation: opacity 0.3s linear;
 83     }
 84     @-webkit-keyframes opacity {
 85         0% {
 86             opacity:0;
 87         }
 88         100% {
 89             opacity:1;
 90         }
 91     }
 92     @keyframes opacity {
 93         0% {
 94             opacity:0;
 95         }
 96         100% {
 97             opacity:1;
 98         }
 99     }
100     </style>
101     <link rel="stylesheet" href="../dist/dropload.css">
102 </head>
103 <body>
104 <div class="header">
105     <h1>就当我是新闻页吧</h1>
106 </div>
107 <div class="content">
108     <div class="lists">
109     </div>
110 </div>
111 <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
112 <script src="js/zepto.min.js"></script>
113 <script src="../dist/dropload.min.js"></script>
114 <script>
115 $(function(){
116     // 页数
117     var page = 0;
118     // 每页展示5个
119     var size = 5;
120 
121     // dropload
122     $('.content').dropload({
123         scrollArea : window,
124         threshold : 100,//提前加载距离
125         loadUpFn : function(me){
126             $.ajax({
127                 type: 'GET',
128                 url: 'http://ximan.github.io/dropload/examples/json/update.json',
129                 dataType: 'json',
130                 success: function(data){
131                     var result = '';
132                     for(var i = 0; i < data.lists.length; i++){
133                         result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
134                                         +'<img src="'+data.lists[i].pic+'" alt="">'
135                                         +'<h3>'+data.lists[i].title+'</h3>'
136                                         +'<span class="date">'+data.lists[i].date+'</span>'
137                                     +'</a>';
138                     }
139                     // 为了测试，延迟1秒加载
140                     setTimeout(function(){
141                         $('.lists').html(result);
142                         // 每次数据加载完，必须重置
143                         me.resetload();
144                         // 重置页数，重新获取loadDownFn的数据
145                         page = 0;
146                         // 解锁loadDownFn里锁定的情况
147                         me.unlock();
148                         me.noData(false);
149                     },1000);
150                 },
151                 error: function(xhr, type){
152                     alert('Ajax error!');
153                     // 即使加载出错，也得重置
154                     me.resetload();
155                 }
156             });
157         },
158         loadDownFn : function(me){
159             page++;
160             // 拼接HTML
161             var result = '';
162             $.ajax({
163                 type: 'GET',
164                 url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
165                 dataType: 'json',
166                 success: function(data){
167                     var arrLen = data.length;
168                     if(arrLen > 0){
169                         for(var i=0; i<arrLen; i++){
170                             result +=   '<a class="item opacity" href="'+data[i].link+'">'
171                                             +'<img src="'+data[i].pic+'" alt="">'
172                                             +'<h3>'+data[i].title+'</h3>'
173                                             +'<span class="date">'+data[i].date+'</span>'
174                                         +'</a>';
175                         }
176                     // 如果没有数据
177                     }else{
178                         // 锁定
179                         me.lock();
180                         // 无数据
181                         me.noData();
182                     }
183                     // 为了测试，延迟1秒加载
184                     setTimeout(function(){
185                         // 插入数据到页面，放到最后面
186                         $('.lists').append(result);
187                         // 每次数据插入，必须重置
188                         me.resetload();
189                     },1000);
190                 },
191                 error: function(xhr, type){
192                     alert('Ajax error!');
193                     // 即使加载出错，也得重置
194                     me.resetload();
195                 }
196             });
197         }
198     });
199 });
200 </script>
201 </body>
202 </html>

 

posted on 2017-11-24 11:20  H__D  阅读(6139)  评论(0)  编辑  收藏  举报
 
Copyright © 2024 H__D
Powered by .NET 8.0 on Kubernetes
博客园