loading

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

<loading> 为容器提供上拉加载功能,用法和属性与 <refresh> 类似。

注意:<loading><scroller><list><hlist><vlist><waterfall> 的子组件,只能在被它们包含时才能被正确渲染。

  • 简单示例:
  1. <list>
  2. ...
  3. ...
  4. <loading>
  5. ...
  6. </loading>
  7. </list>

子组件

  • 诸如 <text><image> 之类的任何组件,都可以放到 <loading> 进行渲染。

  • 特殊子组件 <loading-indicator>: 只能作为 <refresh><loading> 的子组件使用,拥有默认的动画效果实现。

  • 简单示例:

  1. <loading>
  2. <text>Loading</text>
  3. <loading-indicator></loading-indicator>
  4. ...
  5. </loading>

属性

属性名类型默认值
displayStringshow / hideshow

display

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

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

注意:display 的设置必须成对出现,即设置 display="show",必须有对应的 display="hide"

  • 简单示例:

    1. <template>
    2. <list>
    3. ...
    4. ...
    5. <loading@loading="onloading" :display="loadinging ? 'show' : 'hide'">
    6. ...
    7. </loading>
    8. ...
    9. </list>
    10. </template>
    11. <script>
    12. ...
    13. methods:{
    14. onloading (event){
    15. this.loadinging =true
    16. setTimeout(()=>{
    17. this.loadinging =false
    18. },2000)
    19. },
    20. }
    21. </script>
  • 查看 完整示例

  • 支持所有通用属性。查看 组件通用属性

样式

事件

loading

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

  • 查看 完整示例

示例