触底加载上拉刷新

上拉： 

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 (
    

      

        {refreshing ? 'Refreshing...' : 'Pull down to refresh'}
       
      
      {/* 商品列表 */}
      

          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100
          
100

        
    
  );
}

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 (
    

      

        {data.map((item, index) => (
          
{item}
        ))}
      
      

      {loading && 
Loading...
}
      
      
    
  );
}

export default Chudi;