reactjs-pull-refresh
This is a react component for pull down refresh.
Install
npm install reactjs-pull-refresh --save
Example
npm install
gulp example
Online Example
http://reactjs-ui.github.io/reactjs-pull-refresh/
Build Example
第一次需要先执行前两步操作,再执行第三步。以后修改例子后,只需要执行第三步即可
- 创建 gh-pages 分支,在执行 git subtree add 命令之前,需确保 gh-pages 分支下至少存在一个文件
git branch gh-pages
git checkout gh-pages
rm -rf * //隐藏文件需要单独删除,结合命令 ls -a
git add -A
git commit -m "clear gh-page"
git push --set-upstream origin gh-pages
vim README.md
//输入一些内容
git add README.md
git commit -m "README.md"
git push
git checkout master
- 把分支 gh-pages 添加到本地 subtree 中,执行该命令前,请确保 examples-dist 文件夹不存在
git subtree add --prefix=examples-dist origin gh-pages --squash
- 生成在线 examples
gulp example:build
git add -A examples-dist
git commit -m "Update online examples"
git subtree push --prefix=examples-dist origin gh-pages --squash
git push
Usage
;;;;; // 初始化 tapEvent 事件, 移动端; { superprops; thisstate = items: 20 hasMore: true ; } { return { ; }; }; { return { ; }; }; { console; }; { let contents = ; const items hasMore = thisstate; for let i = items; i > 0; i-- if i < 10 contents; else contents; const props = maxAmplitude: 80 debounceTime: 30 throttleTime: 100 deceleration: 0001 refreshCallback: thisrefreshCallback loadMoreCallback: thisloadMoreCallback hasMore ; return <PullRefresh ...props> <ol className="example-list"> contents </ol> </PullRefresh> ; } ;
Options
选项 | 类型 | 功能 |
---|---|---|
className | PropTypes.string | 自定义 className |
children | PropTypes.node | 待渲染的内容 |
refreshCallback | PropTypes.func | 上拉刷新回调函数,需要是 promise 函数 |
loadMoreCallback | PropTypes.func | 下拉加载更多回调函数,需要是 promise 函数 |
hasMore | PropTypes.bool.isRequired | 是否有更多数据 |
loadMoreThrottle | PropTypes.number | 设置加载更多,距离最底部临界值 |
scrollBar | PropTypes.bool | 是否显示滚动条 |
maxAmplitude | PropTypes.number | 设置上下滑动最大弹性振幅度,单位为像素,默认为 80 像素 |
debounceTime | PropTypes.number | 设置防抖时间 |
throttleTime | PropTypes.number | 设置滑动条移动频率,值越大,移动的越缓慢 |
deceleration | PropTypes.number | 设置弹性滑动持续时间,即滑动停止时,弹性持续的时间,值越大,持续时间越短 |
scrollSpeed | PropTypes.number | 设置滚动加速度,值越大,滚动越快 |
thresholdOffset | PropTypes.number | 设置上下移动临界值,移动超过该值,则向上或向下滑动 |
durationSpeed | PropTypes.number | 滑动持续时间系数,系数越大,持续的时间短 |
easing | PropTypes.string | 设置加速方式,默认为匀速,详情查看 https://github.com/component/ease |
refresh | PropTypes.bool | 是否显示刷新 |
loadMore | PropTypes.bool | 是否加载更多 |
Build
gulp build
Publish
npm publish
More React Component
Issue
https://github.com/reactjs-ui/reactjs-pull-refresh/issues
CHANGELOG
Please view here