wxc-loading使用

wxc-loading有两种：页面<wxc-loading>和局部<wxc-part-loading>。

1.    <wxc-loading>

<wxc-loading>更复杂，会覆盖其父对象。

wxc-loading的图标必然是显示在页面中间的，且不随页面滚动而滚动；但蒙层只会蒙住其父对象。所以一旦wxc-loading的父对象位于页面下部，会出现loading图标在页面中间加载，而蒙层却显示在下方的现象。

<wxc-loading show="false"
             loading-text="正在请求..."
             :interval="0"
             type="default"
             :need-mask="true"
             :mask-style="muskStyle">
</wxc-loading>

以上就是一个<wxc-loading>的全部设置。其中：

①   show：用于显示/隐藏wxc-loading。

②   loading-text：在动态图标下面显示的文本。

③   interval：延迟，单位是毫秒。作用是延迟x毫秒后再显示wxc-loading。

④   type：图案类别。目前只支持两个值：default/trip。default就是常见的转圈加载样式。而trip则是一个诡异的带翅膀的圈。这两个值都是定义在wxc-loading相关的type.js中的。

两个gif的路径：

https://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif

https://img.alicdn.com/tfs/TB1aks3PpXXXXcXXFXXXXXXXXXX-150-150.gif

注意后者由于是纯白色，会跟背景混在一起。调整背景色为非白色即可。

⑤   need-mask：是否启用蒙层。因为加载图案显示的时候，其后的控件都是可点击状态。若希望加载时屏蔽掉后面的点击，则启用蒙层，这样就会在加载图案后附加一个蒙层，默认是半透明的黑色。

⑥   mask-style：蒙层的样式，在这里进行自定义。传入一个对象。

2.    <wxc-part-loading>

<wxc-part-loading show="false"
                  :width="60"
                  :height="60">
</wxc-part-loading>

以上就是一个<wxc-part-loading>的全部设置。其中：

①   show：用于显示/隐藏wxc-part-loading。

②   width：用于设置加载图标的宽度。

③   height：用于设置加载图标的高度。

wxc-part-loading只有这3个属性。无法更换加载图标，无法设置loading-text，无法使用蒙层。