RefreshControl 下拉刷新

通过触发，立刻重新加载内容。

规则

  • 只能和 ListView 结合使用，不能单独使用。

  • 可考虑定期自动刷新，eg：登录 app 后，自动刷新首页 List。

代码演示

ListView RefreshControl

下拉刷新 

  1. /* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
  2. import { RefreshControl, ListView } from 'antd-mobile';
  4. const data = [
  5.   {
  6.     img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
  7.     title: '相约酒店',
  8.     des: '不是所有的兼职汪都需要风吹日晒',
  9.   },
  10.   {
  11.     img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
  12.     title: '麦当劳邀您过周末',
  13.     des: '不是所有的兼职汪都需要风吹日晒',
  14.   },
  15.   {
  16.     img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
  17.     title: '食惠周',
  18.     des: '不是所有的兼职汪都需要风吹日晒',
  19.   },
  20. ];
  21. let index = data.length - 1;
  23. let pageIndex = 0;
  25. const App = React.createClass({
  26.   getInitialState() {
  27.     const dataSource = new ListView.DataSource({
  28.       rowHasChanged: (row1, row2) => row1 !== row2,
  29.     });
  31.     this.initData = [];
  32.     for (let i = 0; i < 20; i++) {
  33.       this.initData.push(`r${i}`);
  34.     }
  35.     return {
  36.       dataSource: dataSource.cloneWithRows(this.initData),
  37.       refreshing: false,
  38.     };
  39.   },
  40.   onRefresh() {
  41.     this.setState({ refreshing: true });
  42.     setTimeout(() => {
  43.       this.initData = [`ref${pageIndex++}`, ...this.initData];
  44.       this.setState({
  45.         dataSource: this.state.dataSource.cloneWithRows(this.initData),
  46.         refreshing: false,
  47.       });
  48.     }, 1000);
  49.   },
  50.   onScroll() {
  51.     console.log('sss');
  52.   },
  53.   render() {
  54.     const separator = (sectionID, rowID) => (
  55.       <div
  56.         key={`${sectionID}-${rowID}`}
  57.         style={{
  58.           backgroundColor: '#F5F5F9',
  59.           height: 8,
  60.           borderTop: '1px solid #ECECED',
  61.           borderBottom: '1px solid #ECECED',
  62.         }}
  63.       />
  64.     );
  65.     const row = (rowData, sectionID, rowID) => {
  66.       if (index < 0) {
  67.         index = data.length - 1;
  68.       }
  69.       const obj = data[index--];
  70.       return (
  71.         <div key={rowID}
  72.           style={{
  73.             padding: '0.08rem 0.16rem',
  74.             backgroundColor: 'white',
  75.           }}
  76.         >
  77.           <h3 style={{ padding: 2, marginBottom: '0.08rem', borderBottom: '1px solid #F6F6F6' }}>
  78.             {obj.title}
  79.           </h3>
  80.           <div style={{ display: '-webkit-box', display: 'flex' }}>
  81.             <img style={{ height: '1.28rem', marginRight: '0.08rem' }} src={obj.img} />
  82.             <div style={{ display: 'inline-block' }}>
  83.               <p>{obj.des}-{rowData}</p>
  84.               <p><span style={{ fontSize: '1.6em', color: '#FF6E27' }}>35</span>元/任务</p>
  85.             </div>
  86.           </div>
  87.         </div>
  88.       );
  89.     };
  90.     return (
  91.       <ListView
  92.         dataSource={this.state.dataSource}
  93.         renderRow={row}
  94.         renderSeparator={separator}
  95.         initialListSize={5}
  96.         pageSize={5}
  97.         scrollRenderAheadDistance={200}
  98.         scrollEventThrottle={20}
  99.         onScroll={this.onScroll}
  100.         style={{
  101.           height: document.body.clientHeight / 2,
  102.           border: '1px solid #ddd',
  103.           margin: '0.1rem 0',
  104.         }}
  105.         scrollerOptions={{ scrollbars: true }}
  106.         refreshControl={<RefreshControl
  107.           refreshing={this.state.refreshing}
  108.           onRefresh={this.onRefresh}
  109.         />}
  110.       />
  111.     );
  112.   },
  113. });
  115. ReactDOM.render(<App />, mountNode);

RefreshControl下拉刷新 - 图1

API (web)

  • icon (any) - 刷新指示icon, 包含 pull and release 状态

  • loading (any) - 加载指示器

  • distanceToRefresh (number, default: 50 / 2 * (window.devicePixelRatio || 2)) - 刷新距离

  • onRefresh (function, required) - 刷新回调函数

  • refreshing (boolean, false) - 是否显示刷新状态

icon/loading API 如何自己设置，参考这里 https://github.com/ant-design/ant-design-mobile/blob/master/components/refresh-control/index.web.tsx#L11

API (react-native)

见此：https://facebook.github.io/react-native/docs/refreshcontrol.html#props