有时候一个页面申请接口须要加载很长时间，这时候就须要一个加载页面来告知用户内容正在申请加载中，上面就写一个简略的自定义加载组件。
目录
- 筹备工作
- 逻辑思路
- 实战演练
- 成果预览
筹备工作
在之前的全局组件目录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, },});成果预览
上面看一下预览成果吧。
圆环成果
呼吸成果
旋转成果
最初
以上就是自定义加载组件的次要内容，有不足之处，请多多斧正。