React 移动端 下拉刷新、上拉加载组件 mpulltorefresh

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