如何使用Vue axios无限滚动从json获取数据列表

Question

我想将数据从 Vue.js 导入到 axios 并应用无限滚动。

并希望按顺序显示 json 数据。现在只有索引 [0] 被重复。我们该如何解决？谢谢。

https://jsfiddle.net/naeun/eywraw8t/131773/

   <div id="app">
      <section data-aos="fade-zoom-in" v-for="post in posts">
            <div class="post">
              <p class="colon" data-aos="fade-zoom-in"><span>“</span></p>
              <p class="quote">{{post.quote}}</p>
              <p class="colon" data-aos="fade-zoom-in"><span>”</span></p>
              <p class="author" data-aos="fade-zoom-in">{{post.author}}</p>
            </div>
        </section> 
    </div>

new Vue({
  el: "#app",
  data: {
    bottom: false,
    posts: []
  },
  methods: {
    bottomVisible() {
      const scrollY = window.scrollY;
      const visible = document.documentElement.clientHeight;
      const pageHeight = document.documentElement.scrollHeight;
      const bottomOfPage = visible + scrollY >= pageHeight;
      return bottomOfPage || pageHeight < visible;
    },
    addPost() {
      axios.get(`https://jsonplaceholder.typicode.com/posts`)
        .then(response => {
            let api = response.data[0];
            let apiInfo = {
              author: api.id,
              quote: api.title,
              tag: api.body
            };
            this.posts.push(apiInfo)
            if(this.bottomVisible()) {
              this.addPost();
            }
        })
        .catch(e => {
          console.log('Error: ', error)
        })
    }
  },
  watch: {
    bottom(bottom) {
      if (bottom) {
        this.addPost();
      }
    }
  },
  created() {
    window.addEventListener('scroll', () => {
      this.bottom = this.bottomVisible()
    });
    this.addPost();
  }
})

Answer 1

这里有一些问题。首先，无论何时滚动到底部，都会调用addPost 方法，对吗？但是该方法本身并不知道要加载哪个“页面”。它一遍又一遍地执行相同的请求。这意味着每次都会得到相同的结果。

然后你使用这个let api = response.data[0];，这意味着无论你收到什么结果，你只会从列表中获取第一项并将其推送到本地数组。

您需要做的是跟踪您正在加载的虚拟“页面”，这意味着每个addPost 就像从虚拟分页中加载其他项目并将它们放在无限列表的末尾，而不是重新加载页面。然后您需要将这个参数传递给加载这些新项目的方法，并准备后端根据请求参数返回特定项目。

祝你好运！