首页 > 代码库 > 下拉滚动加载更多数据

下拉滚动加载更多数据

2024-07-21 14:57:23   225人阅读

简单地实现一个下拉滚动时加载更多数据的效果。这种效果经常在手机端、瀑布流时看到

 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="http://www.mamicode.com/{{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.currentPage51                 },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>
View Code

 

下拉滚动加载更多数据


联系
我们