wxc-loading

Weex 加载提示组件

规则

  • 让用户知道页面正在加载
  • 在某些特定场景下，提供有意义的文案，帮助用户明白哪个任务正在进行中
  • 局部 Loading 不建议设置太大

Demo

wxc-loading 加载器 - 图1 wxc-loading 加载器 - 图2

使用方法

  1. <template>
  2.    <wxc-loading :show="isShow" type="trip"></wxc-loading>
  3.    <wxc-part-loading :show="isShow"></wxc-part-loading>
  4. </template>
  5. <script>
  6.     import { WxcLoading, WxcPartLoading } from 'weex-ui';
  7.       components: { WxcLoading, WxcPartLoading },
  8.       data () {
  9.         return {
  10.           isShow: true
  11.         };
  12.       }
  13.     };
  14. </script>

更详细代码可以参考 demo

可配置参数

页面Loading

Prop Type Required Default Description
show Bool Y false 是否显示
loading-text String N - 配置文案的显示
interval Number N 0 延迟毫秒数显示，用于体验优化
type String N default 图案类别default/trip
need-mask Bool N false 加载时候是都需要一个蒙层防止用于误点
mask-style Object N {} 蒙层样式覆盖

Event

  1. @wxcLoadingMaskClicked="maskClicked"

局部Loading

Prop Type Required Default Description
show Bool Y false 是否显示
width Number N 36 局部加载的宽度
height Number N 36 局部加载的高度

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-loading/