实现下拉刷新，上拉加载

1. 下拉刷新

实现方式是监听touchstart、touchmove和touchend事件

document.addEventListener('DOMContentLoaded', () => {
  let startY = 0;
  let isPulling = false;
  const pullThreshold = 50; // 触发刷新的阈值

  const onTouchStart = (e) => {
    if (window.scrollY === 0) { // 只有在页面顶部时才允许下拉刷新
      startY = e.touches[0].pageY;
      isPulling = true;
    }
  };

  const onTouchMove = (e) => {
    if (isPulling) {
      const currentY = e.touches[0].pageY;
      const diffY = currentY - startY;

      if (diffY > pullThreshold) {
        // 下拉距离超过阈值
        // 显示下拉刷新UI，例如显示一个加载动画
      }
    }
  };

  const onTouchEnd = (e) => {
    if (isPulling) {
      const currentY = e.changedTouches[0].pageY;
      const diffY = currentY - startY;

      if (diffY > pullThreshold) {
        // 触发刷新
        performRefresh();
      }
    }

    // 重置状态
    isPulling = false;
    startY = 0;
  };

  const performRefresh = () => {
    // 模拟异步刷新操作
    setTimeout(() => {
      console.log('页面已刷新');
      // 隐藏下拉刷新UI
    }, 2000);
  };

  document.addEventListener('touchstart', onTouchStart);
  document.addEventListener('touchmove', onTouchMove);
  document.addEventListener('touchend', onTouchEnd);
});

2. 上拉加载

上拉加载是通过scroll事件监听页面的滚动，当滚动条接近底部时，触发加载更多内容的事件

document.addEventListener('DOMContentLoaded', () => {
  const loadMoreThreshold = 300; // 距离底部多远时触发加载，单位为像素

  const onScroll = () => {
    const scrollPosition = window.scrollY + window.innerHeight;
    const bottomPosition = document.documentElement.scrollHeight - loadMoreThreshold;

    if (scrollPosition >= bottomPosition) {
      // 触发加载更多内容
      loadMoreContent();
    }
  };

  const loadMoreContent = () => {
    // 模拟异步加载更多内容操作
    setTimeout(() => {
      const content = document.createElement('div');
      content.textContent = '更多内容加载完毕';
      document.body.appendChild(content);
    }, 2000);
  };

  window.addEventListener('scroll', onScroll);
});