lemonreds
於 2021-04-14 20:03:23 發布
457
收藏 4
分類專欄： React 文章標簽： react reactjs
版權
React
專欄收錄該內容
6 篇文章0 訂閱
訂閱專欄
pull-to-refresh
一個支持下拉刷新、上拉加載的 React 移動端組件。
在線預覽
https://lemonreds.github.io/demo/m-pull-to-refresh/index.html
github倉庫
https://github.com/Lemonreds/m-pull-to-refresh#readme
特點
僅支持移動端。
不限制最大下拉距離，釋放后可以回彈。
刷新完成后，可以配置延遲關閉滑動動畫。
同時支持下拉刷新以及上拉加載。
支持自定義 Header、Footer 組件。
預覽
使用
import MPullToRefresh from '../m-pull-to-refresh';
<MPullToRefresh refresh={refresh} loadMore={loadMore} hasMore={hasMore}>
{list.map((index) => (
<RowRender index={index} key={index} />
))}
</MPullToRefresh>
1
2
3
4
5
6
7
8
下拉刷新的狀態
const PullDownStatus = {
init: 'init', // 未下拉狀態
pulling: 'pulling', // 下拉可以刷新
loosing: 'loosing', // 釋放可以刷新
loading: 'loading', // 刷新中
finish: 'finish', // 完成刷新
};
1
2
3
4
5
6
7
上拉加載的狀態
const PullUpStatus = {
init: 'init', // 上拉可以加載更多
loading: 'loading', // 加載中
finish: 'finish', // 沒有更多數據
};
1
2
3
4
5
本地運行示例
npm run install
npm run start
localhost:3001/example1.html
————————————————
版權聲明：本文為CSDN博主「lemonreds」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Shuphen/article/details/115707761