Как сделать подгрузку блоков при необходимости(скролле)?

Question

[danilr]

Имеется неопределенное количество блоков( скажем 200-500) с информацией и картинкой фоном(для каждого своя), все данные для этих блоков у меня получаются с сервера все разом( то есть я не могу запрашивать с сервака по немногу).
Нужно как-то сделать, чтобы картинки и по возможности сами блоки не подгружались все разом, а по 6 штук. Прокрутил до конца страницы - еще 6 блоков прогрузились и так далее. Сначала 12 загрузить, а как 6 проскролит, то еще 6( чтобы пользователь вообще не видел подгрузки). Подскажите пожалуйста как это сделать?
Сами блоки формируются циклом:

<div v-if="residentials.length">
        <Layout v-for="(residential, index) in residentials" :key="index" :img="residential.thumbnail" :name="residential.title"></Layout>
      </div>

Answer 1

[0xD34F]

Вешаете на прокручиваемый элемент обработчик соответствующего события:

@scroll="onScroll"

В котором проверяете текущее положение прокрутки и инициируете показ дополнительных данных, если надо:

methods: {
  onScroll(e) {
    if (e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
      // ...
    }
  },

Если осуществлять "подгрузку" надо не строго по достижении нижней границы контейнера, а начиная с некоторого расстояния до неё, тогда в неравенстве выше просто вычтите из правой части нужное количество пикселей (e.target.scrollHeight - расстояниеДоНижнейГраницы).

https://jsfiddle.net/ht9q5c7g/

Comments

[danilr]

Вот, шикарно!)

Answer 2

[bqio]

window.addEventListener('scroll', preload);

function preload () {
  if (window.scrollY + 100 > window.innerHeight) {
    let data = null; // ???
    vue.residentials.push(data);
  }
}

Comments

[danilr]

Не совсем понял. Вот пусть у нас будет две глобальных переменных allResidentials - там ВЕСЬ массив элементов и вторая residentials - туда мы будем добавлять по 6 штук из массива allResidentials при условии скрола.
let data тут и играют роль 6 элементов массива так? Вопрос главный в том как мне отделять последовательно по 6 элементов из allResidentials.
Тут наверное должен как-то использоваться метод типа splice

let data = allResidentials.splice( от какого элемента, 6)

Answer 3

[Антон Антон]

https://github.com/tangbc/vue-virtual-scroll-list

Comments

[danilr]

Спасибо, но мне нужна подгрузка без сторонних библиотек

[Антон Антон]

danilr, ну посмотрите раздел how it works, там, в принципе, все понятно.