微信小程序自定义Loading效果

1. 效果图

2. wxml

<view class="loading-model" hidden="{{uploadLoading}}">
    <view class="lm-box">
        <image class="loading" src="http://m.qpic.cn/psc?/V51tK08W01DHek2QrM9N1kWNPe31gfWz/TmEUgtj9EK6.7V8ajmQrEKlLPigUFQwzGFnVdE4rDKuk4a8HI1DBigyO*kJH50FqWJR4hwz31Tdc*ZXlK2B4LFvMO76TQieKtJmMvHB8*QU!/b&bo=gACAAIAAgAACGT0!&rf=viewer_4" mode="aspectFill" />
        <text class="loading-title">{{loadingTitle}}</text>
    </view>
</view>

3. less

.loading-model {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    .lm-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 260rpx;
      height: 260rpx;
      border-radius: 16rpx;
      background-color: rgba(0, 0, 0, 0.7);
      position: absolute;
      top: 34%;
      left: calc(50% - 130rpx);
      .loading {
        width: 80rpx;
        height: 80rpx;
      }
      .loading-title{
        font-size: 28rpx;
        margin-top: 24rpx;
        color: rgba(255,255,255,0.8);
      }
    }
  }

4. js

Page({
  data: {
    uploadLoading: true, //控制的loading样式显示与否
    loadingTitle: "保存中. . .", //loading的提示语
  },
});