Question

我有一些产品列表，它们在页面中间结束。当用户滚动到产品末尾（即页面中间）时，我需要从API加载更多产品。我编写了启用该功能的代码，但是问题是，当我滚动到底部时，该功能多次崩溃（这是预期的行为）。当我滚动到产品末尾时，如何调用函数ONES。第二个问题，如何定义滚动事件的方向，即当用户上下滚动并到达产品末尾时，我需要发出API请求。

window.addEventListener('scroll', () => {
  if(this.isInViewport){
      //api request
      }
  })

isInViewport(){
  const bounding = this.$refs.button.getBoundingClientRect();
      return (
         bounding.top >= 0 &&
         bounding.left >= 0 &&
         bounding.bottom <= (window.innerHeight || 
         document.documentElement.clientHeight) &&
         bounding.right <= (window.innerWidth || 
         document.documentElement.clientWidth));
}

我希望每个产品都可以一次发出API请求

Answer 1

有一个很棒的内置API，称为Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

它可以为您提供帮助，但并非所有浏览器都支持。

无论如何，您都可以通过以下方式修改自己的代码：

let requestSend = false

window.addEventListener('scroll', () => {
  if(this.isInViewport && !requestSend){
      requestSend = true;

      //api request
      ApiRequest().then(() => requestSend = false);
      }
  })

滚动到页面中间时无限滚动

1 个答案: