下拉滚动加载更多数据
简单地实现一个下拉滚动时加载更多数据的效果。这种效果经常在手机端、瀑布流时看到
1 KISSY.add('load',function(S,Core,IO,XTemplate){ 2 var $ = S.all, D = S.DOM, E = S.Event; 3 var API = { 4 'query':'query.do' 5 }; 6 var tpl = '{{#each result}}'+ 7 '<tr>'+ 8 '<td><input type="checkbox" name="fileCheck" class="J_FileCheck" value="{{fileId}}" data-idx="{{xindex}}"/> </td>'+ 9 '<td>{{fileName}} <span class="btnLabel J_FilePreview">预览</span> </td>'+ 10 '<td>{{length}}K</td>'+ 11 '<td>{{modifyTime}}</td>'+ 12 '<td><span class="btnLabel J_FileDownload">下载</span>' + 13 '</td>' + 14 '</tr>' + 15 '{{/each}}'; 16 17 var X = { 18 init:function(){ 19 this.box = $('.J_FileTable'); 20 this.currentPage = 1; 21 this.loading = false; 22 this.loadTimer = null; //定时器是为了防止滚动过程中，不断的发请求 23 24 this._queryFile(); 25 this.bindDialog(); 26 }, 27 bindDialog :function(){ 28 var self = this; 29 self.box.on('scroll',function(e){ 30 var container = $(this); 31 self.loadTimer && clearTimeout(self.loadTimer); 32 //定时器是为了防止滚动过程中，不断的发请求 33 self.loadTimer = setTimeout(function(){ 34 //如果请求发出还没有回来时，就先不发送下个请求 35 if(!self.loading){ 36 var obj = self.box.one('table'); 37 if(obj.height() <= container.scrollTop() + container.height()){ 38 self._queryFile(); 39 } 40 } 41 },100); 42 }) 43 }, 44 _queryFile:function(){ 45 var self = this; 46 self.loading = true; 47 IO({ 48 url: API.query, 49 data: { 50 page: self.currentPage 51 }, 52 type: 'get', 53 dataType: 'json', 54 success: function (data) { 55 if(data && data.result && data.result.length>0){ 56 var html = new XTemplate(tpl).render( data); 57 if(self.currentPage<2){ 58 self.box.all('.J_FTBody').html(html); 59 }else{ 60 self.box.all('.J_FTBody').append(html); 61 } 62 self.currentPage +=1; 63 }else{ 64 self.box.all('.J_FTBody').html('还没有附件，请先添加'); 65 } 66 67 self.loading = false; //加载完成 68 }, 69 error:function(data){ 70 self.loading = false; //加载完成 71 } 72 }); 73 74 } 75 76 }; 77 78 return X; 79 },{ 80 requires: [ 81 'core', 82 'io', 83 'xtemplate' 84 ] 85 });
html部分：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>下拉加载数据</title> <link rel="stylesheet" href="http://g.tbcdn.cn/tb/global/2.9.1/global-min.css"> <script src="http://g.tbcdn.cn/??kissy/k/1.4.2/seed-min.js"></script> <style> .file-tab{ width:500px; height: 200px; overflow-y: scroll; } .table{ width:100%; } .table td, .table th{ height: 25px; } .more-load{ height:5px; } </style> </head> <body> <div class="file-tab clearfix J_FileTable"> <table class="table"> <thead> <tr> <th><input type="checkbox" name="fileCheckAll" class="J_FileCheckAll"></th> <th>文件名</th> <th>大小</th> <th>上传时间</th> <th>操作</th> </tr> </thead> <tbody class="J_FTBody"> <tr> <td> <input type="checkbox" name="fileCheck" class="J_FileCheck" value="398222" /> </td> <td>千牛云盘操作指南.docx <a href="" class="btnLabel J_FilePreview">预览</a> </td> <td>531K</td> <td>2014-9-2 15:30:42</td> <td> <span class="btnLabel J_FileDownload">下载</span> </td> </tr> </tbody> </table> <div class="more-load J_MoreLoad"></div> </div> <script src="load.js"></script> <script> KISSY.use('load',function(S,Load){ Load.init(); }) </script> </body> </html>
