无限滚动在框架7中不起作用

时间:2016-09-07 21:34:54

标签: html html-framework-7

请帮助我找到eroor,预加载器正在工作,但无限滚动不工作,它只显示整个项目而不是限制10项,然后其他项目应显示我滚动到页面底部。



**/*

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);
});
&#13;
&#13;
&#13;

0 个答案:

没有答案