微信小程序加载状态自定义组件

效果图：

wxml代码块（其中image 可自己自定义）

<view class="load-box i-class">
  <view class="load-background"
        hidden="{{!showBackground}}">
    <view class="load-background-line">
    </view>
    <slot name='background'></slot>
  </view>
        <!-- 0; // 加载中
        1; // 加载到底
        2; // 上拉加载
        3; // 加载为空 -->
  <view class="load-content">
    <view class="load-loading"
          wx:if="{{loadState == 0}}">
      <image src="/images/load.png" style="height:48rpx;width:48rpx;"></image>
      <slot name='loading'></slot>
    </view>
    <view class="load-end"
          wx:if="{{loadState == 1}}">
      <image src="/images/loaded.png" style="height:48rpx;width:48rpx;"></image>
      <slot name='end'></slot>
    </view>
    <view class="load-normal"
          wx:if="{{loadState == 2}}">
       <image src="/images/load.png" style="height:48rpx;width:48rpx;"></image>
      <slot name='normal'></slot>
    </view>
    <view class="load-empty"
          wx:if="{{loadState == 3}}">
      <image src="/images/failed.png" style="height:48rpx;width:48rpx;"></image>
      <slot name='empty'></slot>
    </view>
    <view class="load-title">
    {{loadTitle}}
      <slot name='title'></slot>
    </view>
  </view>
</view>

wxss样式代码

/* lee-components/leeLoadingFootItem/index.wxss */
.load-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-background{
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.load-background-line{
  width: 90%;
  /* border-bottom: 2rpx solid #53a1f0; */
}

.load-content{
  z-index: 1;
  /* background: white; */
  position: relative;
  padding: 15rpx 40rpx;
  margin: 15rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

@keyframes iconRotate{
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

.loading-icon{
  animation: iconRotate 3s linear infinite;
}

.load-loading{
  color: #1296DB;
}

.load-end{
  color: #1296DB;
}

.load-normal{
  color: #1296DB;
}

.load-empty{
  color: #1296DB;
}

.load-title{
  color: #1296DB;
  font-size: 32rpx;
  margin-left: 15rpx;
}
**```
json代码块**
```java
{
  "component": true,
  "usingComponents": {
   
  }
}

js代码块

// lee-components/leeLoadingFootItem/index.js
/** ====================================================================== */
/**                                                                        */
/** ============================ loadMore 底部 loading item 组件 ============================== */
/**                                                                        */
/** ====================================================================== */

const LoadFootObj = require("../leeLoadingFootItem/loadFootObj.js") 

Component({
  /** ==================================================== */
  /** ================= 组件数据 Start ==================== */
  /** ==================================================== */
  /**
   * 配置项
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: true,
    },
    loadState: {
      type: Number,
      value: LoadFootObj.Loading_State_Normal,
    },
    showBackground: {
      type: Boolean,
      value: true,
    }
  },

  /**
   * 组件的初始数据 内部属性
   */
  data: {
    loadTitle: null,
  },

  /**
   * 属性监听
   */
  observers: {
    "loadState": function (loadState) {
      let loadTitle = "";
      if (loadState == LoadFootObj.Loading_State_Loading) {
        loadTitle = "正在加载中...";
      } else if (loadState == LoadFootObj.Loading_State_End) {
        loadTitle = "已经到底了！";
      } else if (loadState == LoadFootObj.Loading_State_Normal) {
        loadTitle = '上拉加载';
      } else {
        loadTitle = "呀！暂时没有数据";
      }
      this.setData({
        loadTitle: loadTitle
      })
    }
  },

  /** ==================================================== */
  /** ================= 组件数据 End ==================== */
  /** ==================================================== */

  /** ==================================================== */
  /** ================= 方法 Start ==================== */
  /** ==================================================== */

  /**
   * 组件的方法列表
   */
  methods: {

  },

  /** ==================================================== */
  /** ================= 方法 End ==================== */
  /** ==================================================== */

  /** ==================================================== */
  /** ================= 生命周期 Start ==================== */
  /** ==================================================== */

  /**
   * 生命周期
   */
  lifeTimes: {
    created: function () {
      // 在组件实例刚刚被创建时执行
    },
    attached: function () {
      // 在组件实例进入页面节点树时执行
    },
    ready: function () {
      // 在组件在视图层布局完成后执行
    },
    moved: function () {
      // 在组件实例被移动到节点树另一个位置时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
    error: function () {
      // 每当组件方法抛出错误时执行
    },
  },
  /**
   * 组件所在页面的生命周期
   */
  pageLifetimes: {
    show: function () {
      // 页面被展示
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  },

  /** ==================================================== */
  /** ================= 生命周期 End ==================== */
  /** ==================================================== */

  /** ==================================================== */
  /** ================= 样式 Start ==================== */
  /** ==================================================== */

  /**
   * 外部样式类
   */
  externalClasses: ["i-class"],

  /** ==================================================== */
  /** ================= 样式 End ==================== */
  /** ==================================================== */
})

引用方式：

<i-load-foot-item loadState='{{loadState}}'>
</i-load-foot-item>

若进行技术交流可联系博主：（qq:930210782）
安全你我他，撸代码靠大家！！！