Framework7 Starter

HTML

<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<div id="app">
  <div class="view view-main ios-edges">
    <div class="page" data-name="home">
      <div class="page-content infinite-scroll-content infinite-scroll-top">
        <div class="display-flex justify-content-center">
          <div class="preloader infinite-scroll-preloader color-primary"></div>
        </div>
        <div class="virtual-list"></div>
      </div>
    </div>
  </div>
</div>

CSS

ul {
  height: unset !important;
}

JavaScript

var $$ = Dom7;
var app = new Framework7({
  root: '#app',
  theme: 'auto'
});

var viewMain = app.views.create('.view-main');
var allowInfinite = true;
var index = 0;
var vList;

getItems(index);

$$('.infinite-scroll-content').on('infinite', function (e) {
  if (!allowInfinite) return;

  self.allowInfinite = false;
  $$('.infinite-scroll-preloader').show();

  setTimeout(function () {
    getItems(index);
  }, 500);
});

function getItems(i) {
	let items = [];
  let flag = i + 50;
  
  while (flag != i) {
		items.push(flag);
    flag--;
	}
  
  if (i == 0) {
  	console.log('create vlist: ', items)
  	vList = createVList(items);
    vList.scrollToItem(vList.currentToIndex);
  } else {
  	console.log('prepend vlist: ', items)
		vList.prependItems(items);
	}
  index = i + 50;
  
  $$('.infinite-scroll-preloader').hide();
  
  setTimeout(() => {
  	allowInfinite = true;
  }, 2000);
}

function createVList(items) {
	return app.virtualList.create({
      el: '.virtual-list',
      items: items,
      rowsBefore: 100,
      rowsAfter: 100,
      renderItem: function (item) { 
      	return '<li>' +
          '<div class="item-content">' +
            '<div class="item-inner">' +
            '<div class="item-title-row">' +
              '<div class="item-title">Position: ' + item + '</div>' +
            '</div>' +
          '</div>' +
        '</li>'
      }
  });
}