使用rxjs实现无限滚动

import { fromEvent } from 'rxjs';

const scroll$ = fromEvent(window, 'scroll');

import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

const scroll$ = fromEvent(window, 'scroll').pipe(
  throttleTime(200) // 限制触发频率为每200毫秒一次
);

import { fromEvent } from 'rxjs';
import { throttleTime, map } from 'rxjs/operators';

const scroll$ = fromEvent(window, 'scroll').pipe(
  throttleTime(200), // 限制触发频率为每200毫秒一次
  map(() => ({
    scrollTop: window.pageYOffset,
    windowHeight: window.innerHeight,
    documentHeight: document.documentElement.scrollHeight
  })),
  map(({ scrollTop, windowHeight, documentHeight }) => ({
    shouldLoadMore: scrollTop + windowHeight >= documentHeight - 200 // 判断是否需要加载更多数据，这里使用200作为阈值
  }))
);

import { fromEvent } from 'rxjs';
import { throttleTime, map } from 'rxjs/operators';

const scroll$ = fromEvent(window, 'scroll').pipe(
  throttleTime(200), // 限制触发频率为每200毫秒一次
  map(() => ({
    scrollTop: window.pageYOffset,
    windowHeight: window.innerHeight,
    documentHeight: document.documentElement.scrollHeight
  })),
  map(({ scrollTop, windowHeight, documentHeight }) => ({
    shouldLoadMore: scrollTop + windowHeight >= documentHeight - 200 // 判断是否需要加载更多数据，这里使用200作为阈值
  }))
);

scroll$.subscribe(({ shouldLoadMore }) => {
  if (shouldLoadMore) {
    // 发送网络请求获取更多数据，并更新页面
    // ...
  }
});