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. <refresh>
  2. <text>Refreshing</text>
  3. <loading-indicator></loading-indicator>
  4. ...
  5. </refresh>

属性

属性名类型默认值
displayStringshow / hideshow

display

  • show:如果 <refresh> 中包含 <loading-indicator>,则将其显示并开始默认动画。

  • hide:收起 refresh view,如果 <refresh> 中包含 <loading-indicator>,则将其视图隐藏。

注意: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. <script>
  10. ...
  11. methods:{
  12. onrefresh (event){
  13. this.refreshing =true
  14. setTimeout(()=>{
  15. this.refreshing =false
  16. },2000)
  17. },
  18. }
  19. </script>

样式

事件

refresh

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

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

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

    • dy: 前后两次回调滑动距离的差值
    • pullingDistance: 下拉的距离
    • viewHeight: refresh 组件高度
    • type: “pullingdown” 常数字符串
  • 简单示例:
  1. <scroller>
  2. <refresh @refresh="onrefresh" @pullingdown="onpullingdown">
  3. ...
  4. </refresh>
  5. ...
  6. </scroller>
  7. <script>
  8. exportdefault{
  9. methods:{
  10. onrefresh (event){
  11. ...
  12. },
  13. onpullingdown (event){
  14. console.log("dy: "+ event.dy)
  15. console.log("pullingDistance: "+ event.pullingDistance)
  16. console.log("viewHeight: "+ event.viewHeight)
  17. console.log("type: "+ type)
  18. }
  19. }
  20. }
  21. </script>

示例