::: warning The <refresh>
Component provide a pulldown-refresh function for some special containers, its usage and attributes are similar to the <loading>
Component.
To be rendered properly, the <refresh>
Component must appear inside the special Component such as <scroller>
、<list>
、<hlist>
、<vlist>
、<waterfall>
. :::
<scroller> <refresh> <text>Refreshing...</text> </refresh> <div v-for="num in lists"> <text>{{num}}</text> </div> </scroller>
Any other components, like the <text>
and <image>
components, can be put inside the refresh component.
<loading-indicator>
: This is a dedicated component which provides a default refresh animation effect, can only be used inside the <refresh>
or the <loading>
components.
<refresh> <text>Refreshing</text> <loading-indicator></loading-indicator> </refresh>
Attribute | Type | Value | Default Value |
---|---|---|---|
display | String | show / hide | show |
display
show
:The refresh animation will be started if a <loading-indicator>
is included in the refresh component.
hide
:Collapse the refresh view. It also hides the <loading-indicator>
and stops the loading animation if there's a <loading-indicator>
included in the refresh component.
Note: The visibility of
<refresh>
component can be controlled by display attribute with the value show and hide. Adisplay="show"
should always be paired with adisplay="hide"
statement.
refresh
pullingdown
v0.6.1+Triggered when the scroller or list is pulled down. The attributes dy
, pullingDistance
, viewHeight
and type
are accessible from the event
object :
dy
: The offset between two scroll actions
pullingDistance
: The distance of pulling
viewHeight
: The height of refreshView
type
: “pullingdown” constant string type for this event
<refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'"> <text>Refreshing ...</text> <loading-indicator></loading-indicator> </refresh>
rax-refreshcontrol
is the component <refresh>
of rax, which can run in web and weex.
import { createElement, Component, render } from 'rax'; import View from 'rax-view'; import Text from 'rax-text'; import Driver from 'driver-universal'; import RecyclerView from 'rax-recyclerview'; import RefreshControl from 'rax-refreshcontrol'; class RefreshControlDemo extends Component { state = { isRefreshing: false, loaded: 0, refreshText: '↓ Pull To Refresh' }; handleRefresh = (e) => { this.setState({ isRefreshing: true, refreshText: 'Refreshing', }); setTimeout(() => { // update Data this.setState({ isRefreshing: false, refreshText: '↓ Pull To Refresh', }); }, 1000); }; render() { return ( <View> <RecyclerView refreshControl={null}> <RefreshControl refreshing={this.state.isRefreshing} onRefresh={this.handleRefresh} > <Text>{this.state.refreshText}</Text> </RefreshControl> <RecyclerView.Cell> <View> <Text>this is list</Text> </View> </RecyclerView.Cell> </RecyclerView> </View> ); } } render(<RefreshControlDemo/>, document.body, { driver: Driver });