上拉： 

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 : deltasetOffsetY(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 (<divstyle={{ height: '100vh', overflow: 'scroll' }}onTouchStart={handleTouchStart}onTouchMove={handleTouchMove}onTouchEnd={handleTouchEnd}><divstyle={{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;