微信小程序自定义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');
    },
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

4.完整代码

https://gitee.com/susuhhhhhh/components

5.更多小程序案例

https://gitee.com/susuhhhhhh/wxmini_demo