如何在 Vue.js App 中无限滚动？

Question

我正在使用带有 Unsplash API 的 Vue 制作照片库。现在我不会无限滚动来加载图像。 我有一个像“https://api.unsplash.com/photos?page=1”这样的 API 并且知道如何在我到达页面末尾时从“https://api.unsplash.com/photos”获取照片?页=2”？

Answer 1

实现它的一种流行方法是使用Intersection Observer API 。

它还存在一个很好的 vue 包装器vue-intersect 。 它将允许您执行以下操作：

<template>
  <intersect @leave="loadMore">
      <img src.... 
  </intersect>
<template>

...

methods: {
     loadMore() {

      //here the api call

    }

Answer 2

您的数据大部分是 ajax 请求的有限数据，例如分页（例如：请求应该有 20 个数据）并且您的新数据添加到数据标签