微信小程序自定义loading加载动画组件

1.实现效果

在这里插入图片描述

2.组件介绍

在这里插入图片描述

3.部分代码

// components/loading/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否显示弹框
    is_show:{
      type:Boolean,
      value:false
    },
    l_width:{
      type:Number,
      value:150,
    },
    l_height:{
      type:Number,
      value:150,
    },
    text_size:{
      type:Number,
      value:14,
    },
    six_width:{
      type:Number,
      value:60,
    },
    l_bg:{
      type:String,
      value:'',
    },
    six_bg:{
      type:String,
      value:'',
    },
    loading_text:{
      type:String,
      value:"加载中..."
    },
    imgSrc:{
      type:String,
      value:""
    },
    // 渐变色1
    text_color1:{
      type:String,
      value:"#d4b81a"
    },
    //渐变色2
    text_color2:{
      type:String,
      value:"#32a2b1"
    },
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    closeModal() {
      this.cancel();
    },
    cancel() {
      this.setData({
        is_show:false
      })
      this.triggerEvent('cancel');
    },
  }
})

4.完整代码

https://gitee.com/susuhhhhhh/components

5.更多小程序案例

https://gitee.com/susuhhhhhh/wxmini_demo