• <refresh>
    • 简介
    • 子组件
    • 属性
    • 事件
    • Vue 示例
    • Rax 示例

    <refresh>

    简介

    <refresh> 为容器提供下拉刷新功能。

    warning 注意

    • <refresh> 是 <scroller>、<list>、<waterfall> 的子组件，只能在被它们包含时才能被正确渲染。
    1. <scroller>
    2.   <refresh>
    3.     <text>Refreshing...</text>
    4.   </refresh>
    5.   <div v-for="num in lists">
    6.     <text>{{num}}</text>
    7.   </div>
    8. </scroller>

    子组件

    • 诸如 <text>、<image> 之类的任何组件，都可以放到 <loading> 进行渲染。
    • 特殊子组件 <loading-indicator>: 只能作为 <refresh> 和 <loading> 的子组件使用，拥有默认的动画效果实现。
      1. <refresh>
      2. <text>Refreshing</text>
      3. <loading-indicator></loading-indicator>
      4. </refresh>

    属性

    • display控制 <refresh> 组件显示、隐藏。display 的设置必须成对出现，即设置 display="show",必须有对应的 display="hide"。可选值为 show / hide，默认值为 show。

    事件

    • refresh 事件：当 <scroller>、<list>、<waterfall> 被下拉完成时触发。
    • pullingdown 事件：当 <scroller>、<list>、<waterfall> 被下拉时触发。可以从 event 参数对象中获取以下数据：
      • dy: 前后两次回调滑动距离的差值
      • pullingDistance: 下拉的距离
      • viewHeight: refresh 组件高度
      • type: “pullingdown” 常数字符串
    1. <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
    2.   <text>Refreshing ...</text>
    3.   <loading-indicator></loading-indicator>
    4. </refresh>

    Vue 示例

    基本用法

    Rax 示例

    rax-refreshcontrol 是 <refresh> 组件的上层封装，提供了 Weex 下拉刷新能力

    1. import { createElement, Component, render } from 'rax';
    2. import View from 'rax-view';
    3. import Text from 'rax-text';
    4. import Driver from 'driver-universal';
    5. import RecyclerView from 'rax-recyclerview';
    6. import RefreshControl from 'rax-refreshcontrol';
    8. class RefreshControlDemo extends Component {
    9.   state = {
    10.     isRefreshing: false,
    11.     loaded: 0,
    12.     refreshText: '↓ Pull To Refresh'
    13.   };
    15.   handleRefresh = (e) => {
    16.     this.setState({
    17.       isRefreshing: true,
    18.       refreshText: 'Refreshing',
    19.     });
    20.     setTimeout(() => {
    21.       // update Data
    22.       this.setState({
    23.         isRefreshing: false,
    24.         refreshText: '↓ Pull To Refresh',
    25.       });
    26.     }, 1000);
    27.   };
    29.   render() {
    30.     return (
    31.       <View>
    32.         <RecyclerView
    33.           refreshControl={null}>
    34.           <RefreshControl
    35.             refreshing={this.state.isRefreshing}
    36.             onRefresh={this.handleRefresh}
    37.           >
    38.             <Text>{this.state.refreshText}</Text>
    39.           </RefreshControl>
    40.           <RecyclerView.Cell>
    41.             <View>
    42.               <Text>this is list</Text>
    43.             </View>
    44.           </RecyclerView.Cell>
    45.         </RecyclerView>
    46.       </View>
    47.    );
    48.   }
    49. }
    51. render(<RefreshControlDemo/>, document.body, { driver: Driver });

    rax-refreshcontrol 文档