小程序封装加载动画

在微信小程序中，我们可以通过自定义组件的方式来封装加载动画。以下是一个简单的加载动画组件的实现：

首先，在小程序的目录中创建一个新的文件夹 components，然后在这个文件夹中创建一个新的文件 loading.wxml：

<view class="weui-loading">
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
  <view class="weui-loading__dot"></view>
</view>

接下来，在 loading.wxss 文件中定义样式：

.weui-loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.weui-loading__dot {
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
  margin: 5px;
  opacity: 0.8;
  animation: weui-loading-dot 1.2s infinite step-end;
}
 
@keyframes weui-loading-dot {
  0%, 20%, 60%, 100% { opacity: 0.8; }
  40% { opacity: 1; }
  80% { opacity: 0.8; }
}

最后，在需要使用加载动画的页面的 JSON 配置文件中引入自定义组件：

{
  "usingComponents": {
    "loading": "/components/loading/loading"
  }
}

在页面的 WXML 文件中使用：

<loading></loading>

这样就可以在页面中显示加载动画了。如果需要在代码中控制加载动画的显示或隐藏，可以在 WXML 中为加载动画添加 hidden 属性，并在页面的 JS 文件中控制 hidden 属性的值。