小程序使用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 组件

　5：调用组件

 ...
async onLoad() {
　　//显示
   this.$invoke('Loading', 'show');
};
//这样就可以根据自己的需求控制 loading 组件
...

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

 

转载于:https://www.cnblogs.com/l-yabiao/p/9125380.html