prefacio
En el desarrollo de pequeños programas, el proceso de carga de la página puede parecer muy lento debido a las malas condiciones de la red o al volumen excesivo de datos.En este momento, agregar una animación de carga puede aliviar efectivamente la ansiedad de espera del usuario. Para varias páginas de la aplicación, el uso de la animación de carga global puede mejorar la experiencia del usuario y hacer que la aplicación se vea más hermosa y profesional.
Este blog de intercambio de tecnología presentará los pasos de implementación específicos para encapsular la animación de carga global en el subprograma para ayudarlo a mejorar la experiencia del usuario del subprograma.
Efecto
tren de pensamiento
La idea central de encapsular la animación de carga global es mostrar la animación de carga cuando cada página carga datos y cerrar la animación una vez que se completa la carga de datos. Dado que debe usarse en todas las páginas, debemos encapsular la animación de carga en un componente global para que llamen todas las páginas.
Pasos de implementación concretos
Paso 1: crear un componente de carga
Creamos un nuevo componente de carga para mostrar la animación e implementamos el método para iniciar y finalizar la animación en el componente.
codigo wxml:
<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>
codigo js:
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示loading
showLoading: {
type: Boolean,
value: false
}
},
/**
* 组件的方法列表
*/
methods: {
// 开启动画
show() {
this.setData({
showLoading: true});
},
// 关闭动画
hide() {
this.setData({
showLoading: false});
}
}
});
//estilo CSS
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;
}
Paso 2: cargue el componente de carga en app.js
Cargue el componente personalizado Loading en App.js y configure los métodos globales showLoading y hideLoading para mostrar y ocultar el componente Loading.
codigo 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();
}
});
Paso 3: llame al método global donde se necesita la animación de carga
Cuando se necesite una animación de carga, muestre la animación de carga llamando al método showLoading en App.js y llame al método hideLoading para cerrar la animación de carga después de cargar los datos.
codigo js:
// 在页面中显示Loading动画
App.showLoading();
// 在数据请求成功回调中隐藏Loading动画
wx.request({
url: 'url',
success: function(res) {
// 数据请求成功
App.hideLoading();
}
})
Guía de cierre de tajos
En el proceso de desarrollo real, se pueden encontrar algunos escollos. Tenemos que prestar atención a los siguientes puntos:
- Nomenclatura de componentes
Al nombrar un componente, es necesario evitar duplicar el nombre con un componente existente, para evitar conflictos de nombres y hacer que el componente no pueda usarse normalmente. - Método global
Para asegurarse de que el método global surta efecto, el método global debe definirse en App.js y el método App.xxx() debe usarse para llamar donde debe llamarse. - Selección de animación de carga
Al elegir un estilo de animación, debe elegir según los requisitos del producto y la experiencia del usuario para lograr el mejor efecto. Si no le gusta este efecto de carga, puede encontrar otros efectos de animación para cargar animación en este subprograma .
Ejemplo de código completo
El ejemplo de código completo es el siguiente:
//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});
}
}
});
sección de página
<view>
<!--其他页面内容-->
<Loading id="loading"></Loading>
</view>
js parte
// 在页面中显示Loading动画
App.showLoading();
// 在数据请求成功回调中隐藏Loading动画
wx.request({
url: 'url',
success: function(res) {
// 数据请求成功
App.hideLoading();
}
})
sección de estilo
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;
}
Resumir
A través de los pasos anteriores, hemos completado el método de implementación específico para encapsular la animación de carga global en el applet. En el desarrollo real, podemos ajustar y modificar los estilos y métodos de los componentes de acuerdo con las necesidades reales para satisfacer las diferentes necesidades de desarrollo.