下拉滚动加载更多数据

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

 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>

View Code