嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

InfiniteScroll

1、说明

1.1、示例:http://m.ydui.org/html/list.infinitescroll.html

1.2、移动端常见向上滚动自动加载数据插件。InfiniteScroll 仅支持Javascript API方式调用;

2、调用

普通调用

使用jQuery的deferred对象实现异步通信。

<section id="J_List">
<div id="J_ListContent"></div>
</section>

<script>
/* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page,和每页请求的记录数pageSize】 */
var page = 1, pageSize = 10;

$('#J_List').infiniteScroll({
pageSize: pageSize,
initLoad: true,
loadingHtml: '<strong>加载中...</strong>', /* 当然也可以<img src="../img/loading.gif" /> */
loadListFn: function () {
var def = $.Deferred();

/* 通过自定义的方法获取数据 */
$.ajax({
url: '/请求数据方法',
dataType: 'json',
data: { page: page, pagesize: pageSize },
success: function (ret) {
/* 假设ret.list为后端返回的列表数组 */

/* 用你喜欢的方法将获取到的数据拼接成HTML,然后插入;*/
/* 建议使用模板引擎,示例使用artTemplate;https://github.com/aui/artTemplate */
var html = ret.list + '将数据拼接成html';
$('#J_ListContent').append(html);

/* 获取数据,并插入页面后,调用resole,并传入当前获取的记录列表集合 */
def.resolve(ret.list);

/* 页码自增1 */
++page;
}
});

return def.promise();
}
});
</script>
进入详情页后返回列表页,定位之前位置

指定 jumpLink 为跳转元素,将会禁止默认跳转,

特别注意:拼接后的HTML每条数据应包含.J_Link和当前的页面标记data-page,例:

<a href="跳转链接" class="J_Link" data-page="' + page + '">内容内容内容</a>

<section id="J_List">
<div id="J_ListContent"></div>
</section>

<script>
var page = 1, pageSize = 10;

$('#J_List').infiniteScroll({
pageSize: pageSize,
initLoad: true,
backposition: true,
jumpLink: '.J_Link',
loadListFn: function () {
var def = $.Deferred();

$.ajax({
url: '/请求数据方法',
dataType: 'json',
data: { page: page, pagesize: pageSize },
success: function (ret) {
var html = ret.list + '将数据拼接成html';
/* 特别注意:拼接后的HTML每条数据应包含.J_Link和当前的页面标记data-page,例: */
/* <a href="跳转链接" class="J_Link" data-page="' + page + '">内容内容内容</a> */
$('#J_ListContent').append(html);

def.resolve(ret.list);

++page;
}
});

return def.promise();
},
/**
* 当前从详情页返回列表页时调用此方法
* @param listData 该次所需加载的数据集合
* @param retPage 该次加载的页码
*/
loadStorageListFn: function (listData, retPage) {
var def = $.Deferred();

page = retPage;

var html = '';
listData.forEach(function (val) {
html += (val.list + '将数据拼接成html,格式同loadListFn方法一致');
});
$('#J_ListContent').append(html);

def.resolve();
return def.promise();
}
});
</script>

3、参数

参数说明类型可选值默认值
binder 监听滚动容器,用于判断当前进度条是否位于可视区域 Object || String(jQuery选择器) - window
initLoad 是否初始化加载第一屏数据 Boolean - true
pageSize 每页请求的数据量 Number - 0
loadingHtml 加载中提示,支持HTML String - 加载中...
doneTxt 加载完毕提示,支持HTML String - 没有更多数据了
loadListFn 加载数据方法 Function - -
backposition 是否从详情页返回列表页重新定位之前位置 Boolean - false
jumpLink 跳转详情页链接元素,当 backposition 为true时生效 String - -
loadStorageListFn 加载SesstionStorage数据方法,当 backposition 为true时生效 Function - -

4、参与讨论

4.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。