一：為頁面添加無限滾動控件

在可滾動的容器上(一般為page-content）添加“infinite-scroll”類；在頁面底部定義 加載指示器。

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

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

二：在js中監聽滾動到底部的刷新事件，觸發加載新內容

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;

});          

Framework7學習筆記之 無限滾動(滾動到底部時加載新內容)