简单地实现一个下拉滚动时加载更多数据的效果。这种效果经常在手机端、瀑布流时看到
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>
时间： 2024-08-05 07:17:23