RefreshControl 下拉刷新

定义／Definition

规则 / Rule

代码演示

基本

import { RefreshControl } from 'antd-mobile';
let count = 1;
const App = React.createClass({
  getInitialState() {
    return {
      items: [
        <div key={`item-${count}`} style={{ height: 70 }}>条目 {count++}</div>,
      ],
    };
  },
  loadingFunction() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (this.addItem()) {
          resolve();
        } else {
          reject();
        }
      }, 500);
    });
  },
  addItem() {
    this.state.items.push(<div key={`item-${count}`} style={{ height: 70 }}>条目 {count++}</div>);
    this.setState({
      items: this.state.items,
    });
    return true;
  },
  render() {
    return (
      <RefreshControl
        loadingFunction={this.loadingFunction}
        distanceToRefresh={60}
        resistance={1}
        style={{
          position: 'relative',
          paddingTop: 20,
          textAlign: 'center',
        }}
        hammerOptions={{
          touchAction: 'auto',
          recognizers: {
            pan: {
              threshold: 10,
            },
          },
        }}
      >
        <h3>下拉刷新</h3>
        <div style={{ minHeight: 300 }}>
          {this.state.items}
        </div>
      </RefreshControl>
    );
  },
});
ReactDOM.render(<App />, mountNode);

API (web)

API (ios/android)