返回介绍

<loading>

发布于 2020-01-01 14:27:53 字数 2111 浏览 1727 评论 0 收藏 0

简介

<loading> 为容器提供上拉加载功能。

注意

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




 



<scroller>
  <div v-for="num in lists">
    <text>{{num}}</text>
  </div>
  <loading>
    <text>Loading</text>
  </loading>
</scroller>

子组件

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

     

    <loading>
      <text>Loading</text>
      <loading-indicator></loading-indicator>
    </loading>
    
  • 组件 <loading-indicator>: 作为独立组件使用时,通过animating属性控制动画状态。示例

属性

  • display
    控制 <loading> 组件显示、隐藏。display 的设置必须成对出现,即设置 display="show",必须有对应的 display="hide"。可选值为 show / hide,默认值为 show

事件

loading 事件:当 <scroller><list><waterfall> 被上拉完成时触发。

<loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
  <text>Loading ...</text>
  <loading-indicator></loading-indicator>
</loading>

Vue 示例

基本用法

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文