触底加载上拉刷新

上拉： 

import React, { useState } from 'react';

function Shangla() {
  const [refreshing, setRefreshing] = useState(false);
  const [startY, setStartY] = useState(0);
  const [offsetY, setOffsetY] = useState(0);
  const [scrollY, setScrollY] = useState(0);

  const handleTouchStart = (e) => {
    // 记录触摸起始位置和滚动高度
    const touchStartY = e.touches[0].clientY;
    const scrollY = e.currentTarget.scrollTop;
    setStartY(touchStartY);
    setScrollY(scrollY);
  };

  const handleTouchMove = (e) => {
    // 计算手指移动距离
    const touchMoveY = e.touches[0].clientY;
    let delta = touchMoveY - startY;

    // 当手指向下滑动，并且在页面顶部时触发下拉效果
    if (delta > 0 && scrollY === 0) {
      // e.preventDefault(); // 阻止整个页面的滚动
      delta = delta > 50 ? 50 : delta
      setOffsetY(delta);
    }
  };

  const handleTouchEnd = () => {
    // 当滑动距离超过一定阈值时触发刷新
    if (offsetY > 30) {
      setRefreshing(true);
      setStartY(30);
      setOffsetY(30);
      // 执行刷新逻辑...
      // 刷新完成后重置状态
      setTimeout(() => {
        setRefreshing(false);
        setStartY(0);
        setOffsetY(0);
        setScrollY(0);
        window.scrollTo(0, 0); // 滚动到顶部
      }, 1000);
    } else {
      setStartY(0);
      setOffsetY(0);
    }
  };

  return (
    <div
      style={{ height: '100vh', overflow: 'scroll' }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div
        style={{
          transform: `translate3d(0, ${offsetY}px, 0)`,
          transition:'transform 0.5s',
          textAlign: 'center',
          marginTop: '-22px'
        }}
      >
        {refreshing ? 'Refreshing...' : 'Pull down to refresh'}
       
      </div>
      {/* 商品列表 */}
      <ul style={{
          transform: `translate3d(0, ${offsetY}px, 0)`,
          transition: 'transform 0.5s',
          textAlign: 'center',
          margin: '0'
        }}>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>
          <li>100</li>

        </ul>
    </div>
  );
}

export default Shangla;

触底：

import React, { useState, useEffect } from "react";

function Chudi() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 模拟从服务器获取数据的操作
    fetchData();
  }, []);

  // 模拟从服务器获取数据的函数
  const fetchData = () => {
    setLoading(true);

    // 模拟异步请求
    setTimeout(() => {
      const newData = [...data, ...getMoreData()];
      setData(newData);
      setLoading(false);
    }, 2000);
  };

  // 模拟获取更多数据的函数
  const getMoreData = () => {
    // 返回一些新数据
    return [1, 2, 3, 4, 5,6,7,8,9,10];
  };

  // 处理滚动事件
  const handleScroll = (e) => {
    const { scrollTop, clientHeight, scrollHeight } = e.target;

    if (scrollTop + clientHeight  >= scrollHeight) {
      // 到达底部，执行上拉刷新操作
      fetchData();
    }
  };

  return (
    <div style={{ height: "150px", overflow: "auto" }} onScroll={handleScroll}>
      <ul >
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <div style={{height: '30px',background: 'green'}}>
      {loading && <p>Loading...</p >}
      </div>
      
    </div>
  );
}

export default Chudi;