小程序使用wepy框架自定义loading组件

1：定义组

 

<template>
    <view class="app-loading-container" style="{{options.cssText}}" wx:if="{{options.visible}}">
        <image mode="aspectFit" src="{{appLoading}}" class="app-loading-img animated {{options.className}}"></image>
    </view>
</template>


<script>
    import wepy from 'wepy';
    export default class Loading extends wepy.component {
        data = {
            options: {
                className: '',//动画类名
                visible: false,//显示或是隐藏
                cssText: ''//须要时候，控制样式
            },
            appLoading: '../../static/images/public/loading.gif'
        }
        show(cssText = '') {
            this.options.visible = true;
            this.options.cssText = cssText;
            this.options.className = 'fadeIn';
            this.$apply();
            wepy.hideLoading();
        };
        hide(cssText = '') {
            this.options.cssText = cssText;
            this.options.className = 'fadeOut';
            this.$apply();
            this._out();
        };
        _out() {//复位
            setTimeout(() => {
                this.options.visible = false;
                this.$apply();
            }, 1000);
        }
    }
</script>

 

 

 

 2：页面引用组件

 

  import Loading from 'component/loading/Loading';

 

　3：挂载

  ...
components = {
      Loading,
    };
  ...

　4：模板上使用 loading 组件

<template>
  <view class="container">
　　　...
    <!-- 加载动画 -->
    <Loading/>
    ...
  </view>
</template>

　5：调用组件

 ...
async onLoad() {
　　//显示
   this.$invoke('Loading', 'show');
};
//这样就能够根据本身的需求控制 loading 组件
...

 五个步骤，是从定义到使用的流程，这种没有像 alert 组件由回调，定义组件简单，下次就开始定义alert confirm 组件的文章