有时候一个页面请求接口需要加载很长时间,这时候就需要一个加载页面来告知用户内容正在请求加载中,下面就写一个简单的自定义加载组件。
目录
- 准备工作
- 逻辑思路
- 实战演练
- 效果预览
准备工作
在之前的全局组件目录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