简介

<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. 2. Refreshing 3. 4.

属性

• 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. Refreshing ...

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'; 7. 8. class RefreshControlDemo extends Component { 9. state = { 10. isRefreshing: false, 11. loaded: 0, 12. refreshText: '↓ Pull To Refresh' 13. }; 14. 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. }; 28. 29. render() { 30. return ( 31. 32. 34. 38. {this.state.refreshText} 39. 40. 41. 42. this is list 43. 44. 45. 46. 47. ); 48. } 49. } 50. 51. render(, document.body, { driver: Driver });

rax-refreshcontrol 文档