使用 API 反应无限滚动

Question

我想使用 yts API 无限滚动显示每 10 个数据。它表明我可以通过这段代码显示数据https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10' 它的限制在 1 - 50 之间，但我想无限地显示数据。它似乎有页面参数.. 你们知道如何无限显示数据吗？

这是ytsAPI的link https://yts.am/api#list_movies

这是我的调用代码API

_getMovies = async()=>{
 const movies = await this._callApi() 
 this.setState({
   movies 
 })
}

  _callApi=()=>{
    return   fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10')
    .then(potato=> potato.json()) 
    .then(json=> json.data.movies)
    .catch(err=>console.log(err))
    }

Answer 1

infinite scoll 背后的基本思想是从 API 中获取 N 条记录。 N 取决于您的屏幕高度，因此列表中的每个项目都有一定的高度，因此除以每个项目的可用屏幕高度/高度。现在它会给你 N 中的一些数字，现在需要一些额外的记录，比如 4-5 这样你就会有滚动，现在检查 scrollTop 是否超过 scrollHeight 属性。当它再次出现时，将调用下一页。就是这样，这就是它的工作原理。

使用 API 反应无限滚动

React Infinite scrolling with using API

infinite-scroll

reactjs