共计 4361 个字符，预计需要花费 11 分钟才能阅读完成。
有时候一个页面申请接口须要加载很长时间，这时候就须要一个加载页面来告知用户内容正在申请加载中，上面就写一个简略的自定义加载组件。
目录
- 筹备工作
- 逻辑思路
- 实战演练
- 成果预览
筹备工作
在之前的全局组件目录 components 下新建一个组件文件夹，命名为q-loading，组件为q-loading.vue。
再找几个成果不错的 css 加载动画，而后批改一下款式。
逻辑思路
编写模板局部
要求具备扩展性，因而能够应用 slot 插槽来插入内容，也不便前期批改自定义。
应用 class 和style绑定一些父组件传过来的值，更加个性化。
这个页面分为图标和文本提醒两局部，各自能够自定义显示、大小、色彩。
编写款式局部
这部分就是图标和文本的款式以及一些加载动画的内容。
编写脚本局部
这部分次要是父组件传递过去的参数，通过 props 进行制订格局。
实战演练
上面就简略实现一个加载组件。
模板局部
<view
class="q-loading"
:style="{'backgroundColor': props.bgColor}"
v-if="props.show"
>
<view class="q-loading-inner">
<slot name="load">
<!-- 图标局部 -->
<view
:class="{'q-loading-icon': true,'pause': !props.show && !props.showIcon}"
v-if="props.showIcon"
>
<slot name="icon">
<!-- 圆环 -->
<view
class="q-loading-item q-loading-circle"
:style="{'width': props.borSize +'rpx','height': props.borSize +'rpx','borderWidth': props.borWin +'rpx','borderColor': props.borColor,'borderLeftColor': props.bordActiveColor}"
v-if="props.iconName =='circle'"
>
</view>
<!-- 呼吸 -->
<view
class="q-loading-item q-loading-circle-breath"
v-if="props.iconName =='circle-breath'"
>
</view>
<!-- 旋转 -->
<view
class="q-loading-item q-loading-circle-round"
v-if="props.iconName =='circle-round'"
>
<view
class="loading-round"
:style="{'backgroundColor': props.bordActiveColor}"
></view>
<view
class="loading-round"
:style="{'backgroundColor': props.bordActiveColor}"
></view>
<view
class="loading-round"
:style="{'backgroundColor': props.bordActiveColor}"
></view>
<view
class="loading-round"
:style="{'backgroundColor': props.bordActiveColor}"
></view>
<view
class="loading-round"
:style="{'backgroundColor': props.bordActiveColor}"
></view>
<view
class="loading-round"
:style="{'backgroundColor': props.bordActiveColor}"
></view>
<view
class="loading-round"
:style="{'backgroundColor': props.bordActiveColor}"
></view>
</view>
</slot>
</view>
<!-- 提醒文本 -->
<view
class="q-loading-text"
v-if="props.showText"
:style="{'color': props.textColor,'fontSize': props.textSize +'rpx'}"
>
<slot name="text"> {{props.text}} </slot>
</view>
</slot>
</view>
</view>款式局部
这部分就是页面的款式以及三个对应的动画。
- 页面的款式
.q-loading {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10rpx;
width: 100%;
height: 100vh;
.q-loading-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.q-loading-icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10rpx;
width: 100rpx;
height: 100rpx;
.q-loading-circle {
border-radius: 50%;
border-style: solid;
animation: loadingCircle 1s linear infinite;
}
.q-loading-circle-breath {box-shadow: 0 0 0 0 rgb(204, 73, 152);
height: 36px;
width: 36px;
border-radius: 50%;
animation: loadingCircleBreath 1s linear infinite;
}
.q-loading-circle-round {
position: relative;
width: 75rpx;
height: 75rpx;
.loading-round {
position: absolute;
width: 26rpx;
height: 26rpx;
border-radius: 50%;
animation: loadingCircleRound 3s ease infinite;
transform-origin: 120% 80rpx;
&.loading-round:nth-child(1) {z-index: 7;}
&.loading-round:nth-child(2) {
height: 12px;
width: 12px;
animation-delay: 0.2s;
z-index: 6;
}
&.loading-round:nth-child(3) {
height: 11px;
width: 11px;
animation-delay: 0.4s;
z-index: 5;
}
&.loading-round:nth-child(4) {
height: 10px;
width: 10px;
animation-delay: 0.6s;
z-index: 4;
}
&.loading-round:nth-child(5) {
height: 9px;
width: 9px;
animation-delay: 0.8s;
z-index: 3;
}
&.loading-round:nth-child(6) {
height: 8px;
width: 8px;
animation-delay: 1s;
z-index: 2;
}
&.loading-round:nth-child(7) {
height: 7px;
width: 7px;
animation-delay: 1.2s;
z-index: 1;
}
}
}
&.pause {
.q-loading-item {animation-play-state: paused;}
}
}
}
}- 三个对应的动画
// 圆环
@keyframes loadingCircle {
0% {transform: rotate(0);
}
100% {transform: rotate(360deg);
}
}
// 呼吸
@keyframes loadingCircleBreath {
0% {transform: scale(0.3);
box-shadow: 0 0 0 0 rgba(36, 175, 214, 60%);
}
60% {transform: scale(0.5);
box-shadow: 0 0 0 56rpx rgba(36, 175, 214, 0%);
}
100% {transform: scale(0.3);
box-shadow: 0 0 0 0 rgba(36, 175, 214, 0%);
}
}
// 转动
@keyframes loadingCircleRound {
to {transform: rotate(1turn);
}
}脚本局部
这部分就是传递的数据，包含组件、图标和文本的显示管制，以及各自的色彩，大小等参数。
const props = defineProps({
// 显示加载
show: {
type: Boolean,
default: true,
},
// 背景色
bgColor: {
type: String,
default: "#fff",
},
// 显示图标
showIcon: {
type: Boolean,
default: true,
},
// 名称
iconName: {
type: String,
default: "circle",
},
// 大小
borSize: {
type: Number,
default: 60,
},
// 边框粗细
borWin: {
type: Number,
default: 8,
},
// 色彩
borColor: {
type: String,
default: "#e3e3e3",
},
// 流动色彩
bordActiveColor: {
type: String,
default: "#24afd6",
},
// 显示文本
showText: {
type: Boolean,
default: true,
},
// 文本内容
text: {
type: String,
default: "加载中...",
},
// 文本色彩
textColor: {
type: String,
default: "#555",
},
// 文本大小
textSize: {
type: Number,
default: 20,
},
});成果预览
上面看一下预览成果吧。
圆环成果
呼吸成果
旋转成果
最初
以上就是自定义加载组件的次要内容，有不足之处，请多多斧正。
正文完
