Overview

The core idea of implementing a global loading animation is to display the loading animation while fetching data on each page and hide it once the data is loaded. Since it needs to be used across all pages, we encapsulate the loading animation into a global component that can be called from any page.

Step-by-Step Implementation

Step 1: Create the Loading Component

Create a new Loading component to display the animation, and implmeent methods to show and hide the animation within the component.

WXML Template:

<view class='loading-mask' wx:if="{{showLoading}}">
    <view class="container">
        <view class="box">
            <view class="atom"></view>
            <view class="atom"></view>
            <view class="atom"></view>
            <view class="dot"></view>
        </view>
    </view>
</view>

JavaScript Logic:

Component({
    properties: {
        // Whether to show loading
        showLoading: {
            type: Boolean,
            value: false
        }
    },
    methods: {
        // Start the animation
        show() {
            this.setData({ showLoading: true });
        },
        // Stop the animation
        hide() {
            this.setData({ showLoading: false });
        }
    }
});

CSS Styles:

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box {
    position: relative;
    width: 120rpx;
    height: 120rpx;
}

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #9eff03;
    animation: dotbreath 2s linear infinite;
}

.atom {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-left-width: 6rpx;
    border-top-width: 6rpx;
    border-left-color: #20ff03;
    border-left-style: solid;
    border-top-style: solid;
    border-top-color: transparent;
}

.atom:nth-of-type(1) {
    left: 0%;
    top: 0%;
    animation: atom1 1s linear infinite;
}

.atom:nth-of-type(2) {
    right: 0%;
    top: 0%;
    animation: atom2 1s linear infinite;
}

.atom:nth-of-type(3) {
    right: 0%;
    bottom: 0%;
    animation: atom3 1s linear infinite;
}

@keyframes dotbreath {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes atom1 {
    0% { transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg); }
    100% { transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg); }
}

@keyframes atom2 {
    0% { transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg); }
    100% { transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg); }
}

@keyframes atom3 {
    0% { transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg); }
    100% { transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg); }
}

.loading-mask {
    height: 170rpx;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
}

Step 2: Register the Loading Component in App.js

Load the custom Loading component in App.js and define global methods showLoading and hideLoading to control the animation.

App({
    onLaunch: function () {
        // Load the Loading component
        this.globalData.loading = this.selectComponent("#loading");
    },
    // Show loading animation
    showLoading() {
        this.globalData.loading && this.globalData.loading.show();
    },
    // Hide loading animation
    hideLoading() {
        this.globalData.loading && this.globalData.loading.hide();
    }
});

Step 3: Use the Global Methods Where Needed

In any page that requires loading, call App.showLoading() to display the animation and App.hideLoading() to hide it once data fetching is complete.

// Show loading animation
App.showLoading();

// Hide loading animation after data request succeeds
wx.request({
    url: 'your-api-url',
    success: function(res) {
        // Request succeeded
        App.hideLoading();
    }
});

Pitfalls to Avoid

During development, watch out for these common issues:

1. Component Naming: Avoid using names that conflict with existing components to prevent naming collisions.
2. Global Methods: Ensure global methods are defined in App.js and called using App.xxx() from other places to guarantee they work correctly.
3. Choosing an Animation Style: Select a loading animation that aligns with the product requirements and user experience. If the provided animation doesn't suit your needs, you can find alternative loading animations online.

Complete Code Example

app.js

App({
    onLaunch: function () {
        this.globalData.loading = this.selectComponent("#loading");
    },
    showLoading() {
        this.globalData.loading && this.globalData.loading.show();
    },
    hideLoading() {
        this.globalData.loading && this.globalData.loading.hide();
    }
});

loading.wxml

<view class='loading-mask' wx:if="{{showLoading}}">
    <view class='loading-content'>
        <image class='loading-image' src='../../images/loading.gif'></image>
        <view class='loading-text'>加载中...</view>
    </view>
</view>

loading.js

Component({
    properties: {
        showLoading: {
            type: Boolean,
            value: false
        }
    },
    methods: {
        show() {
            this.setData({ showLoading: true });
        },
        hide() {
            this.setData({ showLoading: false });
        }
    }
});

Page Template

<view>
    <!-- Other page content -->
    <Loading id="loading"></Loading>
</view>

Page JavaScript

// Use App.showLoading() and App.hideLoading() as needed