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

Question

我正在使用带有 Unsplash 的 Vue 制作照片库 API.And 现在我不会制作无限滚动来加载图像。我有一个像这样的 API "https://api.unsplash.com/photos?page=1" 并且知道当我来到页面末尾时如何制作从 "https:/ /api.unsplash.com/photos?page=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 个数据），您的新数据添加到数据标签

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

How to make infinite scroll in Vue.js App?

javascript

vue.js

infinite-scroll