reactjs-pull-refresh

This is a react component for pull down refresh.

Install

npm install reactjs-pull-refresh --save

Example

npm install
gulp example

http://localhost:9090

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

import React, {Component, PropTypes} from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import PullRefresh from '../src/scripts/index';
import './sass/example.scss';

// 初始化 tapEvent 事件, 移动端
injectTapEventPlugin();

class PullRefreshSimple extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: 20,
      hasMore: true
    };
    this.refreshCallback = this.refreshCallback.bind(this);
    this.loadMoreCallback = this.loadMoreCallback.bind(this);
    this.ceshiTouchTap = this.ceshiTouchTap.bind(this);
  }

  refreshCallback() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let result = false;
        if (Math.random() > 0.2) {
          result = true;
        }
        if (result) {
          this.setState({
            items: 20,
            hasMore: true
          }, () => {
            resolve();
          });
        } else {
          reject();
        }
      }, 1000);
    }).then(() => {
      console.info('刷新成功！');
    }, () => {
      console.info('刷新失败！');
    });
  }

  loadMoreCallback() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let result = false;
        if (Math.random() > 0.2) {
          result = true;
        }
        if (result) {
          this.setState({
            items: this.state.items + 10,
            hasMore: this.state.items <= 40
          }, () => {
            resolve();
          });
        } else {
          reject();
        }
      }, 1000);
    }).then(() => {
      console.info('加载更多成功！');
    }, () => {
      console.info('加载更多失败！');
    });
  }

  ceshiTouchTap(e) {
    console.info('测试下拉刷新插件是否与 Tap 事件冲突');
  }

  render() {
    let contents = [];
    const {items, hasMore} = this.state;

    for (let i = items; i > 0; i--) {
      if (i < 10) {
        contents.push(<li key={i}><a href="http://www.sina.com">这里放置真实显示的DOM内容</a> {i}</li>);
      } else {
        contents.push(<li key={i} onTouchTap={this.ceshiTouchTap}>这里放置真实显示的DOM内容 {i}</li>);
      }
    }

    const props = {
      maxAmplitude: 80,
      debounceTime: 30,
      throttleTime: 100,
      deceleration: 0.001,
      refreshCallback: this.refreshCallback,
      loadMoreCallback: this.loadMoreCallback,
      hasMore
    };

    return (
      <PullRefresh {...props}>
        <ol className="example-list">
          {contents.map((item) => {
            return item;
          })}
        </ol>
      </PullRefresh>
    );
  }
}

render(
  <PullRefreshSimple />, document.getElementById('layout')
);

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

More React Component

• reactjs-scroll

Issue

https://github.com/reactjs-ui/reactjs-pull-refresh/issues

Version

Please view here