Skip to main content

Virtual List (Віртуальний список)

techno4 v2.0.4 Core Component MIT License git@github.com:CO-CF-TECHNO4/TECHNO4FRAMEWORK2.git

Virtual List рендерить виключно ті елементи, які потрапляють у поточну зону видимості користувача, забезпечуючи плавну роботу списків із десятками тисяч записів.

Ініціалізація Virtual List 

<div class="list virtual-list media-list"></div>

<script>
  const items = Array.from({ length: 10000 }, (_, i) => ({ title: 'Запис №' + (i + 1) }));
  
  const vl = app.virtualList.create({
    el: '.virtual-list',
    items: items,
    height: 60,
    renderItem(item) {
      return '<li><div class="item-content"><div class="item-inner"><div class="item-title">' + item.title + '</div></div></div></li>';
    }
  });
</script>