小程序使用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 組件的文章