Virtual List с элементами с заранее неизвестной высотой

В данном посте я расскажу, как сделать Virtual List с элементами заранее неизвестной высоты. Источник: Virtual list with dynamic elements

У нас есть массив items, где у каждого элемента может быть задана высота (но изначально ее нет, так как она будет известна только отображения данных).

Во-первых: функция высоты

В первый раз мы не знаем высоту, поэтому используем какое-то примерное число, например, 100.

height : function(item) {
   return typeof item.height === 'undefined' ? 100 : item.height;
}

Во-вторых: метод вычисления высоты

updateVl() {
   //Проходимся по всем элементам списка, например это Card.
   this.$el.find('.card').each((index, el) => {
      const height = this.$(el).height(); //Вычисляем высоту
      const id = this.$(el).data('id'); //Берем ID, чтобы найти нужный элемент в items
      this.items.find(c => c.id == id).height = height; //Записываем настоящую высоту
   });
}

Вот пример элемента:

<div class="card" style="position:relative;" data-id="...">
...
</div>

position:relative; - обязательно для элемента списка Virtual List
data-id - для сопоставления DOM-элемента и элемента в items.

Метод updateVl нужно вызывать при создании / изменении Virtual List.

Почти все, осталось только…

В-третьих: нужно реагировать на изменение размеров окна

pageInit() {
   this.$app.on('resize', this.updateVl); //Подписались
},
pageBeforeRemove() {
   this.$app.off('resize', this.updateVl); //Отписались
}
3 Likes