Framework7学习笔记之 无限滚动(滚动到底部时加载新内容)

<div class="page">
<div class="page-content infinite-scroll" data-distance="100">
...

<!-- 加载提示符 -->
<div class="infinite-scroll-preloader">
<div class="preloader"></div> </div>
</div>
</div>

var $$ = Dom7;

// 加载flag
var loading = false;

// 上次加载的序号
var lastIndex = $$('.list-block li').length;

// 最多可加载的条目：本页面最多加载多少内容
var maxItems = 60;

// 每次加载添加多少条目：每次滑动到底部时加载多少条
var itemsPerLoad = 20;

// 注册'infinite'事件处理函数
$$('.infinite-scroll').on('infinite', function () {

// 如果正在加载，则退出函数
if (loading) return;

// 设置flag：开始加载
loading = true;

加载操作....//拉取新数据

if (lastIndex >= maxItems) {
// 加载到页面最大限额了，则注销无限加载事件，以防不必要的加载
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// 删除加载提示符
$$('.infinite-scroll-preloader').remove();
return;
}

// 生成新条目的HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class="item-content"><div class="item-inner"><div class="item-title">新条目内容...</div></div></li>';
}

// 添加新条目：插入到原页面列表
$$('.list-block ul').append(html);

// 更新最后加载的序号
lastIndex = $$('.list-block li').length;

//加载完毕，设置为false
loading = false;

});