Skip to main content

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

Навігація

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

techno4 v2.0.4 Core Component MIT License GitHub Repository CO «CF TECHNO4»

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>