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

YDUI Touch Docs 返回首页

InfiniteScroll

1、说明

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

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

2、参数

2.1、包含9个参数:

<script>
$('#content').infiniteScroll({
binder: window, /* 监听滚动容器【默认:window】 */
initLoad: true, /* 是否初始化加载第一屏数据 */
pageSize: 0, /* 每页请求的数据量 */
loadingHtml: '加载中...', /* 加载中提示,支持HTML */
doneTxt: '没有更多数据了', /* 加载完毕提示 */
backposition: false, /* 是否从详情页返回列表页重新定位之前位置 */
jumpLink: '', /* 跳转详情页链接元素 */
loadListFn: null, /* 加载数据方法 */
loadStorageListFn: null /* 加载SesstionStorage数据方法 */
});
</script>

3、使用

3.1、使用jQuery的deferred对象实现异步通信;

<section id="J_List">
<div id="J_ListContent"></div>
</section>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<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>

3.2、进入详情页后返回列表页,定位之前位置;

<section id="J_List">
<div id="J_ListContent"></div>
</section>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<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>

4、参与讨论

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