英文网站模板,拖拽网站开发,模板网站怎么建设,手机网站模版免费下载简介 本文基于react实现下拉刷新效果#xff0c;在下拉的时候会进入loading状态。
实现效果 效果如上图所示#xff0c;在下拉到底部时候#xff0c;会出现loading条#xff0c;在处理完成后loading条消失。
具体代码
布局 逻辑
import {useRef, useState} from …简介 本文基于react实现下拉刷新效果在下拉的时候会进入loading状态。
实现效果 效果如上图所示在下拉到底部时候会出现loading条在处理完成后loading条消失。
具体代码
布局 逻辑
import {useRef, useState} from react;export const ScrollView ({loadingComponent, contentComponent}) {const LoadingComponent loadingComponent;const ContentComponent contentComponent;/*** 加载状态*/const [loading, setLoading] useState(false);/*** 滚动容器引用*/const scrollRef useRef(null);let contentStyle {height: 30px, width:100%, textAlign:center, display:none};if (loading){ // 加载中显示contentStyle {height: 30px, width:100%, textAlign:center};scrollRef.current.scrollTop 0; // 滚到头部}const handleScroll (){const {scrollTop} scrollRef.current;if (scrollTop 50 !loading){setLoading(true); // 设置为加载中状态// 模拟数据加载setTimeout((){setLoading(false); // 加载完成}, 3000)}}return (div style{{height: 200px, overflow:auto, width:40%}} ref{scrollRef} onScroll{handleScroll}div style{contentStyle}LoadingComponent//divdiv style{{height:300px, width:100%}}ContentComponent//div/div)
}
使用demo import {ScrollView} from ./component/scroll-view/ScrollView;const App () {return (ScrollView loadingComponent{Loading} contentComponent{Content}/ScrollView)
}
const Loading (){return divloading/div
}
const Content (){return div hello, world/div
}export default App;
