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); });