@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>
  • Вопрос задан
  • 528 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Вешаете на прокручиваемый элемент обработчик соответствующего события:

@scroll="onScroll"

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

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

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

https://jsfiddle.net/ht9q5c7g/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@bqio
https://bqio.github.io/
window.addEventListener('scroll', preload);

function preload () {
  if (window.scrollY + 100 > window.innerHeight) {
    let data = null; // ???
    vue.residentials.push(data);
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы