Framework7 無限滾動

html結構

<div class="page">
    <div class="page-content infinite-scroll">
        ... 
    </div>
</div>

<div class="page-content infinite-scroll">
  <div class="list-block">
    <ul>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div>
      </li>
      ...
      <li class="item-content">
        <div class="item-inner">
          <div class="item-title">Item 20</div>
        </div>
      </li>
    </ul>
  </div>
  <!-- Preloader -->
  <div class="infinite-scroll-preloader">
    <div class="preloader"></div>
  </div>
</div> 

 

js調用

var myApp = new Framework7(); 
 
var $$ = Dom7;
 
// Loading flag
var loading = false;
 
// Last loaded index
var lastIndex = $$('.list-block li').length;
 
// Max items to load
var maxItems = 60;
 
// Append items per load
var itemsPerLoad = 20;
 
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
 
  // Exit, if loading in progress
  if (loading) return;
 
  // Set loading flag
  loading = true;
 
  // Emulate 1s loading
  setTimeout(function () {
    // Reset loading flag
    loading = false;
 
    if (lastIndex >= maxItems) {
      // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
      myApp.detachInfiniteScroll($$('.infinite-scroll'));
      // Remove preloader
      $$('.infinite-scroll-preloader').remove();
      return;
    }
 
    // Generate new items 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">Item ' + i + '</div></div></li>';
    }
 
    // Append new items
    $$('.list-block ul').append(html);
 
    // Update last loaded index
    lastIndex = $$('.list-block li').length;
  }, 1000);
});