使用 Vue 和 Axios 滚动浏览旧内容后加载更多内容？答案

【问题标题】：Loads more content after scrolling through old one using Vue and Axios?使用 Vue 和 Axios 滚动浏览旧内容后加载更多内容？
【发布时间】：2019-01-25 14:55:27
【问题描述】：

到目前为止，我有这样的事情：

<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 请求生成的内容时，再发出一个 axios GET 请求。

基本上，我不确定如何确定用户是否滚动浏览了旧内容并到达了它的底部。任何提示如何做到这一点？

【问题讨论】：

标签： javascript vue.js vuejs2 axios

【解决方案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 中的类名）。希望对你有帮助！

【讨论】：

【解决方案2】：

您可以使用vue-infinite-scroll

【讨论】：