微信小程序自定义loading组件

首先说明一下，这是一个无脑实战的自定义loading组件篇幅，组织结构及内容都会详细给出，在必要的地方会稍加注释说明作用，可以直接复制到项目中使用，这只是一个引子，可以在这个基础是去实现更多的可能，从而丰富在小程序上的应用，期待你的观看。

废话不多说直接上代码，逐步剖析，从组件创建到在Page中使用都直接贴码，相应步骤如下：

在components目录下创建loading目录，相应文件内容如下：

loading.wxml

<view class="zh-loading" hidden="{{!visible}}">
    <view class="iconfont icon-loading"></view>
    <view class="zh-desc">玩命加载中...</view>
</view>

loading.js

Component({
    options: {
        addGlobalClass: true // 允许使用全局图标样式
    },
    properties: {
        show: {
            type: Boolean,
            value: false,
            observer(value) {
                this.setData({visible: value});
            }
        }
    },
    data: {
        visible: false
    }
});

loading.json

{
    "component": true
}

loading.wxss

.zh-loading {
  padding: 50rpx 0;
  text-align: center;
}
.zh-loading .icon-loading {
  display: inline-block;
  font-size: 70rpx;
  color: #666;
  -webkit-animation: rotate 3s 0s infinite linear;
          animation: rotate 3s 0s infinite linear;
}
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.zh-loading .zh-desc {
  margin-top: 10rpx;
  font-size: 30rpx;
  color: #999;
}

loading动态效果静态截图：

在页面中使用：

test.json

{
  "usingComponents": {
    "loading": "/components/loading/loading"
  }
}

test.wxml

<loading show="{{true}}"></loading>

至此一个完整的loading组件从构建到使用就完成了，非常简单，在做个性化loading的时候可以参考使用。