小程序实现一个全局的loadding效果

前言：

        小程序中实现一个全局的loadding效果，也可以根据具体的组件大小来调整他的高度。

实现效果：

1、整个页面

2、局部组件大小

 实现步骤：

1、 app.js中全局定义字段

App({
    globalData: {
        loadingImg:'https://xxxxxx/loading/loading.gif',//你的loadding图片地址
    }
})

2、components中建立loadding的文件信息，load为文件夹

 load/index.wxml

<view class="load-bg" style="{
   
   {'background-color:'+backgroundColor+';top:'+loaddingTop}}">
  <view class="load">
    <view class="load-box">
      <image class="load-box-img" src="{
   
   {loadingImg}}"></image>
    </view>
  </view>
</view>

  load/index.wxss

.load-bg{
  position: fixed;
  left:0;
  top:0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999;
}
.load{
  position: fixed;
  top: 50%;
  margin-top: -40rpx;
  width: 100%;
}
.load-box{
  height: 80rpx;
  /* margin: 0 112rpx; */
  text-align: center;
}
.load-box .load-box-img{
  width: 80rpx;
  height: 80rpx;
}

 load/index.js

// components/load/index.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    loadinTime:{
      type:Number,
      value:0
    },
    //自定义loadding的top,这里是控制整个覆盖还是局部覆盖的核心
    loaddingTop:{
      type:Number | String,
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    loadingImg:'',
    backgroundColor:'',
  },
  lifetimes: {
    created() {},
    attached() {},
    ready() {
      this.setData({
        loadingImg:app.globalData.loadingImg,
        backgroundColor:app.globalData.loadingBackgroundColor,
      })
      console.log('loading')
    },
  },
  /**
   * 组件的方法列表
   */

  methods: {}
})

 load/index.json

{
  "component": true,
  "usingComponents": {}
}

3、页面上具体使用：带自定义切换的页面

首页：   index文件夹

 index/index.wxml

<loading  wx:if="{
   
   {loadingFlag}}" />

index/index.js

data:{
    loadingFlag:true,
}
onLoad(options) {
    //关闭自定义tab切换
    this.getTabBar().setData({
       tabBarShow:false,
    })
}



//打开loadding
this.setData({
   loadingFlag:true
})


//关闭loadding 并 打开自定义tab切换
this.setData({
    loadingFlag:false
})
 this.getTabBar().setData({
      tabBarShow:true,
})

index/index.json

{
  "disableScroll": true,
  "usingComponents": {
      "loading":"../../components/load/index"  
  }
}

4、页面上具体使用：普通页面全局

cart 文件夹

cart/index.wxml

<loading  wx:if="{
   
   {loadingFlag}}" />

cart/index.js

//打开loadding
this.setData({
   loadingFlag:true
})
//关闭loadding
this.setData({
    loadingFlag:false
})

cart/index.json

 "usingComponents": {
    "loading":"../../components/load/index"
}

5、页面上具体使用：局部页面的loadding效果

wxml

<loading wx:if="{
   
   {loadingFlag}}" loaddingTop="{
   
   {loaddingTop}}"/>

js

data: {
    loadingFlag:true,
    loaddingTop:'88rpx'
  },

6、弹框上具体使用

wxml

<popup
  show="{
   
   { show }}"
>
    <view slot="content" class="title-contant">
        <loading wx:if="{
   
   {loadingFlag}}"/>
    </view>
</popup>