Загружает больше контента после прокрутки старого, используя Vue и Axios?

Question

Пока что у меня есть что-то вроде этого:

<template>
    <div class='sights-list'>
        <div v-for='(sight, index) in sights'>
            <p>{{ sight.name }}</p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data: function() {
        return {
            sights: []
        }
    },
    methods: {

    },
    mounted(){
        axios.get('/getSights/' + lat + '/' + lng + '/' + type)
            .then(response => {
                this.sights = response.data.result.results
        }).catch((error) => console.log(error));
    }
}

Теперь я пытаюсь сделать еще один аксиос GET-запрос, когда пользователь прокрутил все содержимое, сгенерированное из GET-запроса,был выполнен, когда компонент был смонтирован.

По сути, я не уверен, как определить, прокрутил ли пользователь старый контент и достиг ли его нижней части.Любые советы, как это сделать?

Answer 1

Я недавно сделал нечто подобное. Я должен был сделать это с чистым JavaScript:

processInfiniteScroll = () => {
    this.window.addEventListener('scroll', (event) => {
        const sidenavBody = document.getElementsByClassName('list-group ul-lista-popup');

        if (sidenavBody && sidenavBody[0]){

            const finalPosition = sidenavBody[0].scrollHeight - sidenavBody[0].clientHeight;
            const scrollTop = sidenavBody[0].scrollTop;

            if (finalPosition - scrollTop <= 0) {
                const newIndex = (this.itemsReduced.length + 30) <= this.itemsCompleted.length ? (this.itemsReduced.length + 30) : this.itemsCompleted.length;

                const newArray = this.itemsCompleted.slice(0, newIndex);

                this.itemsReduced = newArray;
            }
        };
    }, true)
}

И вызовите этот метод в mounted.

Конечно, вы должны адаптировать этот код к своему (в основном это имя класса в getElementsByClassName). Я надеюсь, что это поможет вам!

Answer 2

Вы можете использовать vue-infinite-scroll