微信小程序loading组件显示载入动画的用法介绍-猿码集

1. loading组件简介

微信小程序中，有一个loading组件，可以用来显示载入动画。这款组件可以对页面进行半透明遮罩处理，并在遮罩层上面显示旋转的小图标，以提醒用户当前页面正在载入数据。在某些场景下，用户需要等待，而loading组件能够为用户提供反馈信息，告诉他们正在进行什么操作，并让用户知道他们需要等待多少时间。

2. loading组件的使用方法

2.1 在page.json中引入loading组件

第一步，在page.json中引入loading组件。引入后，我们就可以在页面中使用它了。


{
  "usingComponents": {
    "van-loading": "/path/to/vant-weapp/dist/loading/index"
  }
}

2.2 在页面中使用loading组件

第二步，在页面中使用loading组件。在需要使用的地方，我们可以直接引入loading组件。


<van-loading />

2.3 loading组件的属性

loading组件可以设置一些属性，来满足不同场景下的需求。下面是loading组件可设置的属性。

1. color：设置loading图标的颜色。默认为#c9c9c9。

2. size：设置loading图标的大小。默认为30px。

3. type：设置loading图标的类型。目前支持如下几种类型：spin（旋转）、circular（环形）。默认为spin。

第三步，在需要使用的地方，我们可以设置loading组件的属性。


<van-loading color='#1989fa' size='50' type='circular' />

3. loading组件的实现原理

loading组件的实现原理比较简单，它主要是通过使用CSS，来实现旋转的小图标。

3.1 遮罩层的实现

当页面需要显示loading组件时，首先需要在页面上添加一个遮罩层，这里可以使用CSS中的伪元素before和after来实现。


.van-loading-mask::before,
.van-loading-mask::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.van-loading-mask::before {
  background-color: rgba(255, 255, 255, 0.5);
}
.van-loading-mask::after {
  background-image: url(data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='44px' height='44px' viewBox='0 0 44 44' stroke='%23ffffff'><g fill='none' fill-rule='evenodd' stroke-width='2'><circle cx='22' cy='22' r='1'><animate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'></animate><animate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'></animate></circle><circle cx='22' cy='22' r='1'><animate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite'></animate><animate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite'></animate></circle></g></svg>);
  background-size: 100% 100%;
  animation: 1.5s rotate infinite linear;
  border-radius: 100%;
}
@keyframes rotate{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

3.2 小图标的实现

遮罩层实现好后，我们接下来就需要实现旋转的小图标。这里可以使用CSS的animation属性来实现。通过不断地改变transform: rotate()的值，来实现旋转动画。


.van-loading-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.van-loading-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-style: solid;
  border-radius: 50%;
  border-width: 2px;
  border-top-color: #c9c9c9;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation: 0.75s rotate cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
@keyframes rotate{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

4. loading组件的注意事项

在使用loading组件时，我们应该注意以下几点：

1. 显示时机：loading组件应该在数据加载时显示，数据加载完毕后应该立即隐藏。

2. 不能使用在按钮上：loading组件不能使用在按钮上，否则会干扰用户的操作。按钮上应该使用button组件的loading属性。

3. 图标更新：如果loading组件需要更换为新的图标，应该重新编写一份CSS样式来实现新的图标。

5. 总结

loading组件是一种常见的反馈机制，它能够帮助用户了解页面中正在进行的操作，并提供预计的等待时间。微信小程序提供了便捷的loading组件，它可以通过简单的引入，来实现loading图标的显示，从而提高用户的体验。我们在使用loading组件时，应该根据实际情况，设置合适的颜色、大小和类型，从而更好地满足用户的需求。

微信小程序loading组件显示载入动画的用法介绍