无限滚动
无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。
在底部的无限滚动
你只需在可滚动的容器上添加“infinite-scroll”类，一般是页面滚动区域 - div.content
{% highlight html %}
{% endhighlight %}
其中：
div class="content infinite-scroll" -是我们无限滚动的容器data-distance - 属性用来配置页面滚动到离底部多远时触发无限滚动事件，默认是50 (px)
javacript:
{% highlight js %}
// 加载flag
var loading = false;
// 最多可加载的条目
var maxItems = 100;
// 每次加载添加多少条目
var itemsPerLoad = 20;
function addItems(number, lastIndex) {
// 生成新条目的HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
html += '';
}
// 添加新条目
$('.infinite-scroll-bottom .list-container').append(html);
}
//预先加载20条
addItems(itemsPerLoad, 0);
// 上次加载的序号
var lastIndex = 20;
// 注册'infinite'事件处理函数
$(document).on('infinite', '.infinite-scroll-bottom',function() {
// 如果正在加载，则退出
if (loading) return;
// 设置flag
loading = true;
// 模拟1s的加载过程
setTimeout(function() {
// 重置加载flag
loading = false;
if (lastIndex >= maxItems) {
// 加载完毕，则注销无限加载事件，以防不必要的加载
$.detachInfiniteScroll($('.infinite-scroll'));
// 删除加载提示符
$('.infinite-scroll-preloader').remove();
return;
}
// 添加新条目
addItems(itemsPerLoad, lastIndex);
// 更新最后加载的序号
lastIndex = $('.list-container li').length;
//容器发生改变,如果是js滚动，需要刷新滚动
$.refreshScroller();
}, 1000);
});
{% endhighlight %}
无限滚动事件
| 事件（Event） |
对象（Target） |
描述（Description） |
| infinite |
可无限滚动的容器
div.content.infinite-scroll"
|
事件会在页面滚动至距底部还有特定距离（可在data-distance中配置）时触发 |
无限滚动API
有2个App方法：
{% highlight js %}
$.attachInfiniteScroll(container) - 为指定的HTML元素容器添加无限滚动事件监听器
parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。
{% endhighlight %}
{% highlight js %}
$.detachInfiniteScroll(container) - 从指定的HTML元素容器删除无限滚动事件监听器
parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。
{% endhighlight %}
注意，仅在你使用$.detachInfiniteScroll方法删除过事件监听器后，才可能需要使用
$.attachInfiniteScroll方法，因为无限滚动组件的事件监听器会在“initPage”时被自动添加。
在顶部的无限滚动
如果你需要向上滚动到顶部时进行无限滚动，那么需要在 “content”添加额外的class infinite-scroll-top
{% highlight html %}
{% endhighlight %}
javacript:
{% highlight js %}
$(function() {
// 最多可加载的条目
var maxItems = 100;
// 每次加载添加多少条目
var itemsPerLoad = 20;
function addItemsTop(number, lastIndex) {
// 生成新条目的HTML
var html = '';
for (var i = lastIndex+ number; i > lastIndex ; i--) {
html += '';
}
// 添加新条目
$('.infinite-scroll .list-container').prepend(html);
}
var timer = false;
$(document).on('infinite', '.infinite-scroll-top',function() {
var lastIndex = $('.infinite-scroll-top .list-block li').length;
var lastLi = $(".list-container li")[0];
var scroller = $('.infinite-scroll-top');
var scrollHeight = scroller[0].scrollHeight; // 获取当前滚动元素的高度
// 如果正在加载，则退出
if (timer) {
clearTimeout(timer);
}
// 模拟1s的加载过程
timer = setTimeout(function() {
addItemsTop(itemsPerLoad,lastIndex);
$.refreshScroller();
// 将滚动条的位置设置为最新滚动元素高度和之前的高度差
scroller.scrollTop(scroller[0].scrollHeight - scrollHeight);
}, 1000);
});
})
{% endhighlight %}
多个标签页下的无限滚动
一个页面的多个标签中可单独初始化infinite-scroll，在需要无限滚动的tab上加"infinite-scroll"类
{% highlight html %}
其他内容区域
其他内容区域
...
其他内容区域
This is tab 1-1 content
This is tab 1-2 content
13855589778
{% endhighlight %}
javacript:
{% highlight js %}
$(document).on("pageInit", function() {
//多个标签页下的无限滚动
var loading = false;
// 每次加载添加多少条目
var itemsPerLoad = 20;
// 最多可加载的条目
var maxItems = 100;
var lastIndex = $('.list-container li')[0].length;
function addItems(number, lastIndex) {
// 生成新条目的HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
html += '';
}
// 添加新条目
$('.infinite-scroll.active .list-container').append(html);
}
$(page).on('infinite', function() {
// 如果正在加载，则退出
if (loading) return;
// 设置flag
loading = true;
var tabIndex = 0;
if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
tabIndex = 0;
}
if($(this).find('.infinite-scroll.active').attr('id') == "tab3"){
tabIndex = 1;
}
lastIndex = $('.list-container').eq(tabIndex).find('li').length;
// 模拟1s的加载过程
setTimeout(function() {
// 重置加载flag
loading = false;
if (lastIndex >= maxItems) {
// 加载完毕，则注销无限加载事件，以防不必要的加载:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多个无线滚动请自行根据自己代码逻辑判断注销时机
// 删除加载提示符
$('.infinite-scroll-preloader').eq(tabIndex).hide();
return;
}
addItems(itemsPerLoad,lastIndex);
// 更新最后加载的序号
lastIndex = $('.list-container').eq(tabIndex).find('li').length;
$.refreshScroller();
}, 1000);
});
});
{% endhighlight %}