微信小程序加载动画

官方文档地址

app.json中引入

"usingComponents": {
    "mp-loading": "weui-miniprogram/loading/loading"
  }

app.wxss中添加，此处自定义加载动画的背景和位置

mp-loading{
  width: 102px;
  height: 102px;
  display: flex;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  align-content: center;
  justify-content: center;
  border-radius: 10px;
  position: fixed;
  top: calc(50% - 51px);
  left: calc(50% - 51px);
}

在需要展示的page.wxml中添加

  <mp-loading type="circle" wx:if="{{showloading==true}}"  show="{{showloading}}"></mp-loading>

在需要展示的page.js中添加data属性

    showloading:false

通过改变showloading的值控制加载动画的显示隐藏