foreword
In the development of small programs, the loading process of the page may appear very slow due to poor network conditions or excessive data volume. At this time, adding a loading animation can effectively relieve the user's anxiety of waiting. For multiple pages of the application, using the global loading animation can improve the user experience and make the application look more beautiful and professional.
This technology sharing blog will introduce the specific implementation steps of encapsulating the global loading animation in the applet to help you improve the user experience of the applet.
Effect
train of thought
The core idea of encapsulating the global loading animation is to pop up the loading animation when each page loads data, and close the animation after the data loading is completed. Since it needs to be used in all pages, we need to encapsulate the loading animation into a global component for all pages to call.
Concrete implementation steps
Step 1: Create a Loading component
We create a new Loading component to display the animation, and implement the methods of starting and ending the animation in the component.
wxml code:
<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>
js code:
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示loading
showLoading: {
type: Boolean,
value: false
}
},
/**
* 组件的方法列表
*/
methods: {
// 开启动画
show() {
this.setData({
showLoading: true});
},
// 关闭动画
hide() {
this.setData({
showLoading: false});
}
}
});
//CSS style
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: Load the Loading component in app.js
Load the custom component Loading in App.js, and set the global methods showLoading and hideLoading to display and hide the Loading component.
js code:
App({
onLaunch: function () {
// 加载Loading组件
this.globalData.loading = this.selectComponent("#loading");
},
// 显示加载动画
showLoading() {
this.globalData.loading && this.globalData.loading.show();
},
// 隐藏加载动画
hideLoading() {
this.globalData.loading && this.globalData.loading.hide();
}
});
Step 3: Call the global method where the loading animation is needed
Where loading animation is needed, display the Loading animation by calling the showLoading method in App.js, and call the hideLoading method to close the Loading animation after the data is loaded.
js code:
// 在页面中显示Loading动画
App.showLoading();
// 在数据请求成功回调中隐藏Loading动画
wx.request({
url: 'url',
success: function(res) {
// 数据请求成功
App.hideLoading();
}
})
Pit Closure Guide
In the actual development process, some pitfalls may be encountered. We need to pay attention to the following points:
- Component Naming
When naming a component, it is necessary to avoid duplicating the name with an existing component, so as to avoid naming conflicts and cause the component to be unable to use normally. - Global method
To ensure that the global method takes effect, the global method should be defined in App.js, and the App.xxx() method should be used to call where it needs to be called. - Selection of loading animation
When choosing an animation style, you should choose according to product requirements and user experience to achieve the best effect. If you don’t like this Loading effect, you can find other animation effects for loading animation in this applet .
Complete code example
The complete code example is as follows:
//app.js
App({
onLaunch: function () {
// 加载Loading组件
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: {
// 是否显示loading
showLoading: {
type: Boolean,
value: false
}
},
/**
* 组件的方法列表
*/
methods: {
// 开启动画
show() {
this.setData({
showLoading: true});
},
// 关闭动画
hide() {
this.setData({
showLoading: false});
}
}
});
page section
<view>
<!--其他页面内容-->
<Loading id="loading"></Loading>
</view>
js part
// 在页面中显示Loading动画
App.showLoading();
// 在数据请求成功回调中隐藏Loading动画
wx.request({
url: 'url',
success: function(res) {
// 数据请求成功
App.hideLoading();
}
})
style section
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;
}
Summarize
Through the above steps, we have completed the specific implementation method of encapsulating the global loading animation in the applet. In actual development, we can adjust and modify component styles and methods according to actual needs to meet different development needs.