基于React实现下拉刷新效果

浦萧曼

目录

• 简介
  
• 实现效果
  
• 具体代码
  
  
  
  • 布局 & 逻辑
    
  • 使用demo
    
  
  
• 番外：上拉加载实现
  

简介

本文基于react实现下拉刷新效果，在下拉的时候会进入loading状态。

实现效果

效果如上图所示，在下拉到底部时候，会出现loading条，在处理完成后loading条消失。

具体代码


布局 & 逻辑

1. import {useRef, useState} from "react";
   
2. 
   
3. export const ScrollView = ({loadingComponent, contentComponent}) => {
   
4.     const LoadingComponent = loadingComponent;
   
5.     const ContentComponent = contentComponent;
   
6. 
   
7.     /**
   
8.      * 加载状态
   
9.      */
   
10.     const [loading, setLoading] = useState(false);
    
11. 
    
12.     /**
    
13.      * 滚动容器引用
    
14.      */
    
15.     const scrollRef = useRef(null);
    
16. 
    
17.     let contentStyle = {height: '30px', width:'100%', textAlign:'center', display:'none'};
    
18. 
    
19.     if (loading){ // 加载中显示
    
20.         contentStyle = {height: '30px', width:'100%', textAlign:'center'};
    
21.         scrollRef.current.scrollTop = 0; // 滚到头部
    
22.     }
    
23. 
    
24.     const handleScroll = ()=>{
    
25.         const {scrollTop} = scrollRef.current;
    
26. 
    
27.         if (scrollTop > 50 && !loading){
    
28.             setLoading(true); // 设置为加载中状态
    
29. 
    
30.             // 模拟数据加载
    
31.             setTimeout(()=>{
    
32.                 setLoading(false); // 加载完成
    
33.             }, 3000)
    
34.         }
    
35. 
    
36.     }
    
37.     return (
    
38.         <div style={{height: '200px', overflow:'auto', width:'40%'}} ref={scrollRef} onScroll={handleScroll}>
    
39.             <div style={contentStyle}>
    
40.                 <LoadingComponent/>
    
41.             </div>
    
42.             <div style={{height:'300px', width:'100%'}}>
    
43.                 <ContentComponent/>
    
44.             </div>
    
45.         </div>
    
46.     )
    
47. }

复制代码

使用demo

1. 
   
2. import {ScrollView} from "./component/scroll-view/ScrollView";
   
3. 
   
4. const App = ()=> {
   
5. 
   
6.     return (
   
7.        <ScrollView loadingComponent={Loading} contentComponent={Content}>
   
8.        </ScrollView>
   
9.     )
   
10. }
    
11. const Loading = ()=>{
    
12.     return <div>loading</div>
    
13. }
    
14. const Content  = ()=>{
    
15.     return <div> hello, world</div>
    
16. }
    
17. 
    
18. 
    
19. 
    
20. export default App;

复制代码

番外：上拉加载实现

1、下载react-pullload

1. npm i react-pullload

复制代码

2、在组件中去引用

1. import ReactPullLoad,{ STATS } from "react-pullload";

复制代码

3、css样式
①引用插件内的样式

1. import "node_modules/react-pullload/dist/ReactPullLoad.css";

复制代码

②或者直接引入使用下列代码：  

1.     .pull-load {
   
2. 
   
3.                       position: relative;
   
4. 
   
5.                       overflow-y: scroll;
   
6. 
   
7.                       -webkit-overflow-scrolling: touch;
   
8. 
   
9.             }
   
10. 
    
11.             .pull-load-head {
    
12. 
    
13.                       position: absolute;
    
14. 
    
15.                       transform: translate3d(0px, -100%, 0px);
    
16. 
    
17.                       width: 100%;
    
18. 
    
19.             }
    
20. 
    
21.             .state-refreshing .pull-load-head,
    
22. 
    
23.             .state-refreshed .pull-load-head {
    
24. 
    
25.                       position: relative;
    
26. 
    
27.                       transform: none;
    
28. 
    
29.             }
    
30. 
    
31.             .pull-load-body {
    
32. 
    
33.                       position: relative;
    
34. 
    
35.             }
    
36. 
    
37.             .state-refreshing .pull-load-body {
    
38. 
    
39.                       transition: transform 0.2s;
    
40. 
    
41.             }
    
42. 
    
43.             .state-reset .pull-load-body {
    
44. 
    
45.                       transition: transform 0.2s;
    
46. 
    
47.             }
    
48. 
    
49.             .pull-load-head-default {
    
50. 
    
51.                       text-align: center;
    
52. 
    
53.                       font-size: 12px;
    
54. 
    
55.                       line-height: 0.8rem;
    
56. 
    
57.                       color: #7676a1;
    
58. 
    
59.             }
    
60. 
    
61.             .state-pulling .pull-load-head-default:after {
    
62. 
    
63.                       content: '下拉刷新';
    
64. 
    
65.             }
    
66. 
    
67.             .state-pulling.enough .pull-load-head-default:after {
    
68. 
    
69.                       content: '松开刷新';
    
70. 
    
71.             }
    
72. 
    
73.             .state-refreshing .pull-load-head-default:after {
    
74. 
    
75.                       content: '正在刷新...';
    
76. 
    
77.             }
    
78. 
    
79.             .state-refreshed .pull-load-head-default:after {
    
80. 
    
81.                       content: '刷新成功';
    
82. 
    
83.             }
    
84. 
    
85.             .state-pulling .pull-load-head-default {
    
86. 
    
87.                       opacity: 1;
    
88. 
    
89.             }
    
90. 
    
91.             .state-pulling .pull-load-head-default i {
    
92. 
    
93.                   display: inline-block;
    
94. 
    
95.                   font-size: 0.3rem;
    
96. 
    
97.                   margin-right: .6em;
    
98. 
    
99.                   margin-top: -3px;
    
100. 
     
101.                   vertical-align: middle;
     
102. 
     
103.                   height: 0.3rem;
     
104. 
     
105.                   border-left: 1px solid;
     
106. 
     
107.                   position: relative;
     
108. 
     
109.                   transition: transform .3s ease;
     
110. 
     
111.             }
     
112. 
     
113.             .state-pulling .pull-load-head-default i:before,
     
114. 
     
115.             .state-pulling .pull-load-head-default i:after {
     
116. 
     
117.                   content: '';
     
118. 
     
119.                   position: absolute;
     
120. 
     
121.                   font-size: .5em;
     
122. 
     
123.                   width: 1em;
     
124. 
     
125.                   bottom: 0px;
     
126. 
     
127.                   border-top: 1px solid;
     
128. 
     
129.             }
     
130. 
     
131.             .state-pulling .pull-load-head-default i:before {
     
132. 
     
133.                   right: 1px;
     
134. 
     
135.                   transform: rotate(50deg);
     
136. 
     
137.                   transform-origin: right;
     
138. 
     
139.             }
     
140. 
     
141.             .state-pulling .pull-load-head-default i:after {
     
142. 
     
143.                   left: 0px;
     
144. 
     
145.                   transform: rotate(-50deg);
     
146. 
     
147.                   transform-origin: left;
     
148. 
     
149.             }
     
150. 
     
151.             .state-pulling.enough .pull-load-head-default i {
     
152. 
     
153.                   transform: rotate(180deg);
     
154. 
     
155.             }
     
156. 
     
157.             .state-refreshing .pull-load-head-default i {
     
158. 
     
159.                   margin-right: 10px;
     
160. 
     
161.                   margin-top: -3px;
     
162. 
     
163.                   display: inline-block;
     
164. 
     
165.                   vertical-align: middle;
     
166. 
     
167.                   font-size: 0.3rem;
     
168. 
     
169.                   width: 0.3rem;
     
170. 
     
171.                   height: 0.3rem;
     
172. 
     
173.                   border: 2px solid #9494b6;
     
174. 
     
175.                   border-top-color: #fff;
     
176. 
     
177.                   border-radius: 100%;
     
178. 
     
179.                   animation: circle .8s infinite linear;
     
180. 
     
181.             }
     
182. 
     
183.             .state-refreshed .pull-load-head-default {
     
184. 
     
185.                   opacity: 1;
     
186. 
     
187.                   transition: opacity 1s;
     
188. 
     
189.             }
     
190. 
     
191.             .state-refreshed .pull-load-head-default i {
     
192. 
     
193.                 display: inline-block;
     
194. 
     
195.                 box-sizing: content-box;
     
196. 
     
197.                 vertical-align: middle;
     
198. 
     
199.                 margin-right: 10px;
     
200. 
     
201.                 margin-top: -3px;
     
202. 
     
203.                 font-size: 14px;
     
204. 
     
205.                 height: 1em;
     
206. 
     
207.                 width: 1em;
     
208. 
     
209.                 border: 2px solid;
     
210. 
     
211.                 border-radius: 100%;
     
212. 
     
213.                 position: relative;
     
214. 
     
215.          }
     
216. 
     
217.          .state-refreshed .pull-load-head-default i:before {
     
218. 
     
219.                content: '';
     
220. 
     
221.               position: absolute;
     
222. 
     
223.               top: -2px;
     
224. 
     
225.               left: 4px;
     
226. 
     
227.               height: 11px;
     
228. 
     
229.               width: 5px;
     
230. 
     
231.               border: solid;
     
232. 
     
233.               border-width: 0 2px 2px 0;
     
234. 
     
235.               transform: rotate(40deg);
     
236. 
     
237.         }
     
238. 
     
239.         .pull-load-footer-default {
     
240. 
     
241.               text-align: center;
     
242. 
     
243.               font-size: 12px;
     
244. 
     
245.               line-height: 0.8rem;
     
246. 
     
247.               color: #7676a1;
     
248. 
     
249.        }
     
250. 
     
251.         .state-loading .pull-load-footer-default:after {
     
252. 
     
253.               content: '加载更多';
     
254. 
     
255.         }
     
256. 
     
257.         .pull-load-footer-default.nomore:after {
     
258. 
     
259.               content: '没有更多';
     
260. 
     
261.         }
     
262. 
     
263.         .state-loading .pull-load-footer-default i {
     
264. 
     
265.               margin-right: 10px;
     
266. 
     
267.               margin-top: -3px;
     
268. 
     
269.               display: inline-block;
     
270. 
     
271.               vertical-align: middle;
     
272. 
     
273.               font-size: 0.3rem;
     
274. 
     
275.               width: 0.3rem;
     
276. 
     
277.               height: 0.3rem;
     
278. 
     
279.               border: 2px solid #9494b6;
     
280. 
     
281.               border-top-color: #fff;
     
282. 
     
283.               border-radius: 100%;
     
284. 
     
285.               animation: circle .8s infinite linear;
     
286. 
     
287.         }
     
288. 
     
289.         @keyframes circle {
     
290. 
     
291.              100% {
     
292. 
     
293.                     transform: rotate(360deg);
     
294. 
     
295.               }
     
296. 
     
297.         }

复制代码

4、pullLoad标签包裹

1. <ReactPullLoad
   
2. 
   
3.                     downEnough={150}
   
4. 
   
5.                     ref="reactpullload"
   
6. 
   
7.                     className="block"
   
8. 
   
9.                      *加上下面注释的属性会出问题
   
10. 
    
11.                     // isBlockContainer={true}
    
12. 
    
13.                     action={this.state.action}
    
14. 
    
15.                     handleAction={this.handleAction}
    
16. 
    
17.                     hasMore={this.state.hasMore}
    
18. 
    
19.                     style={{paddingTop: 132}}
    
20. 
    
21.                     distanceBottom={1000}>
    
22. 
    
23.                     .....  this is list
    
24. 
    
25.                     </ReactPullLoad>

复制代码

5、scroll函数

1. constructor(props) {
   
2. 
   
3.         super(props);
   
4. 
   
5.         this.state = {
   
6. 
   
7.               // scroll 相关
   
8. 
   
9.               hasMore: true,
   
10. 
    
11.               action: STATS.init,
    
12. 
    
13.         }
    
14. 
    
15.     }
    
16. 
    
17. // 滚动条
    
18. 
    
19.     handleAction = (action) => {
    
20. 
    
21.       if(action === this.state.action ||
    
22. 
    
23.         action === STATS.refreshing && this.state.action === STATS.loading ||
    
24. 
    
25.         action === STATS.loading && this.state.action === STATS.refreshing){
    
26. 
    
27.         return false
    
28. 
    
29.       }
    
30. 
    
31.       if(action === STATS.refreshing){//刷新
    
32. 
    
33.           setTimeout(()=>{
    
34. 
    
35.                   //refreshing complete
    
36. 
    
37.                 下拉刷新
    
38. 
    
39.           }, 1000)
    
40. 
    
41.       } else if(action === STATS.loading){//加载更多
    
42. 
    
43.         this.setState({
    
44. 
    
45.           hasMore: true
    
46. 
    
47.         });
    
48. 
    
49.         setTimeout(()=>{
    
50. 
    
51.                   if(this.state.index === this.state.curPage){
    
52. 
    
53.                          this.setState({
    
54. 
    
55.                                  action: STATS.reset,
    
56. 
    
57.                                   hasMore: false
    
58. 
    
59.                            });
    
60. 
    
61.                         } else{
    
62. 
    
63.                                     上拉加载....
    
64. 
    
65.                           }
    
66. 
    
67.             }, 1000)
    
68. 
    
69.       }
    
70. 
    
71.       this.setState({
    
72. 
    
73.         action: action
    
74. 
    
75.       })
    
76. 
    
77.     }

复制代码

到此这篇关于基于React实现下拉刷新效果的文章就介绍到这了,更多相关React下拉刷新内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

伍弘雅

感谢楼主分享。

轩辕海芷

顶顶更健康！！！