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;

});