uniapp项目实践自定义加载组件示例详解
作者：MarkGuan
这篇文章主要为大家介绍了uniapp项目实践自定义加载组件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
准备工作
有时候一个页面请求接口需要加载很长时间，这时候就需要一个加载页面来告知用户内容正在请求加载中，下面就写一个简单的自定义加载组件。
在之前的全局组件目录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,
},
});效果预览
下面看一下预览效果吧。
圆环效果
呼吸效果
旋转效果
最后
以上就是自定义加载组件的主要内容，更多关于uniapp自定义加载组件的资料请关注脚本之家其它相关文章！