微信小程序封装全局加载动画loading

最新推荐文章于 2025-05-10 12:18:43 发布

未曾遇你

最新推荐文章于 2025-05-10 12:18:43 发布

阅读量1.6k

点赞数 15

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_44749901/article/details/139771405

思路

封装全局加载动画的核心思路就是在每个页面加载数据时弹出加载动画，在数据加载完成后关闭动画。由于需要在所有页面中使用，我们需要将加载动画封装成一个全局组件，供所有页面调用。

第一步：创建Loading组件

在components新建Loading组件，用来展示动画，并在组件中实现开启和结束动画的方法。
wxml代码：

<view class='loading-mask' wx:if="{
   
   {showLoading}}">
  <view class='loading-content'>
    <image class='loading-image' src='/img/loading.gif'></image>
  </view>
</view>

js代码：

// components/loading/loading.js
Component({
   
   

  /**
   * 组件的属性列表
   */
  properties: {
   
   
    // 是否显示loading
    showLoading: {
   
   
      type: Boolean,