html结构

     
    
      
               ...     
      
     

     
  
      
    
       
      
        
        
         
          
          
           Item 1
          
        
         
      
      
        
        
         
          
          
           Item 2
          
        
         
      
      ...      
        
        
         
          
          
           Item 20
          
        
         
      
    
       
  
      
  
        
      
    
       
  
      
     

 

js调用

var myApp = new Framework7();  var $$ = Dom7; // Loading flagvar loading = false; // Last loaded indexvar lastIndex = $$('.list-block li').length; // Max items to loadvar maxItems = 60; // Append items per loadvar 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 += '
      
       
        Item ' + i + '
       
      
';    }     // Append new items    $$('.list-block ul').append(html);     // Update last loaded index    lastIndex = $$('.list-block li').length;  }, 1000);});