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就像从虚拟分页加载其他项目，只是将它们放在无穷大末尾一样列表，而不是重新加载页面。然后，您需要将此参数传递到加载这些新项目的方法，并准备后端以根据请求参数返回特定项目。

祝你好运！

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

1 个答案: