小程序自定义loading组件【源码】

效果图：

自定义loading组件wxml源码：

<view class="loading" wx:if="{{show}}">
  <text></text>
  <text></text>
  <text></text>
  <text></text>
  <text></text>
</view>

wxss:

.loading {
  width: 100px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.loading   text {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  animation: load 1s ease infinite;
}

.loading text:nth-child(2) {
  animation-delay: 0.2s;
}

.loading text:nth-child(3) {
  animation-delay: 0.4s;
}

.loading  text:nth-child(4) {
  animation-delay: 0.6s;
}

.loading  text:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes load {
  0%, 100% {
    height: 40px;
    background: lightgreen;
  }

  50% {
    height: 70px;
    margin: -15px 0;
    background: lightblue;
  }
}

js:

Component({
  properties: {
    show: {
      type: Boolean,
      value: true,
    },
   
  },
  data: {
   
  },
  methods: {
   
  }
})

在引入该组件的时候，设置属性show,也就是向loading组价传递参数，判断loading组件什么时候展示和隐藏