refresh

v0.6.1+" class="reference-link">v0.6.1+

<refresh> 为容器提供下拉刷新功能，用法和属性与 <loading> 类似。

注意：<refresh> 是 <scroller>、<list>、<hlist>、<vlist>、<waterfall> 的子组件，只能在被它们包含时才能被正确渲染。 * 简单示例：

  1. <list>
    2.   <refresh>
    3.     ...
    4.   </refresh>
    5.   ...
    6. </list>

• 查看 完整示例

子组件

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

• 简单示例：

  1. 1. Refreshing
     3. ...

• 查看 完整示例

属性

注意： display 的设置必须成对出现，即设置 display="show",必须有对应的 display="hide"。 * 简单示例：

  1. <template>
    2.   <list>
    3.     <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
    4.       ...
    5.     </refresh>
    6.     ...
    7.   </list>
    8. </template>
    9.   10. <script>
    11.   ...
    12.   methods: {
    13.     onrefresh (event) {
    14.       this.refreshing = true
    15.       setTimeout(() => {
    16.         this.refreshing = false
    17.       }, 2000)
    18.     },
    19.   }
    20. </script>

• 查看 完整示例
• 支持所有通用属性。查看 组件通用属性

样式

• 支持所有通用样式。查看 组件通用样式

事件

refresh

• 当 <scroller>、<list>、<hlist>、<vlist>、<waterfall> 被下拉时触发。

v0.6.1+" class="reference-link">pullingdown v0.6.1+

• 当 <scroller>、<list>、<hlist>、<vlist>、<waterfall> 被下拉时触发，可以从 event 参数对象中获取 dy, pullingDistance, viewHeight, type

  • dy: 前后两次回调滑动距离的差值
  • pullingDistance: 下拉的距离
  • viewHeight: refresh 组件高度
  • type: “pullingdown” 常数字符串

• 简单示例：

  1. 2. ...
     4. ...

  2. 查看 完整示例

示例

• 完整示例