解决等待请求数据的空白时期

本文介绍了一种在发送数据请求时改善用户体验的方法。通过子组件向父组件传递状态,当数据正在加载时显示等待加载的符号。在子组件请求接口之前,发送`isLoading`为true的信号,父组件接收到后显示加载动画。请求完成后,子组件发送`isLoading`为false的信号,隐藏加载动画。这种方法确保了用户在数据加载过程中得到明确的反馈。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:在发送数据请求的时候,总会有一两秒的时间让我们等待,这时候会出现空白,给用户体验感不好,因此就需要一个等待加载的符号出现,提示用户,正在加载数据中
在这里插入图片描述
在子组件发送请求数据接口之前向父组件传递一个值为true,表示数据正在加载中,发送完接口之后再向父组件发送一个值为false,表示数据加载完毕
子组件:

//请求接口
    requestTime(time) {
      if(time.length === 0) return;
      //发送请求数据接口之前向父组件传递一个值为true
      this.$emit("isLoading", true); 
      if(myChart) {
        myChart.clear();
      }
      //开始时间
      let startTime = time[0] == "" ? null : time[0];
      //结束时间
     let endTime = time[1] == "" ? null : time[1];
        api
          .getDefectsByTimes({
            startTime: startTime,
            endTime: endTime,
          })
          .then((res) => {
            this.totalEcharts = res.content;
            let objectArr = res.content;
          })
          .catch((err) => {
            console.log(err);
          }).finally(() => {
          //发送完接口之后再向父组件发送一个值为false
            this.$emit("isLoading", false);
          })
    },

父组件:

 <router-view
        :times='times'
        :buttonId="buttonId"
        //接收子组件发送来的isLoading
        :isLoading='isLoading'
        @isLoading="(value) => (isLoading = value)"
      />

父组件通过子组件传来的isLoading进行判断是否显示

<Loading v-if="isLoading" />

正在加载组件的代码

<template>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</template>
<script>
export default {
    name: 'Loading'
}
</script>
<style scoped>
    .loading{
        width: 150px;
        height: 15px;
        margin: 0 auto;
        margin-top:100px;
    }
    .loading span{
        display: inline-block;
        width: 15px;
        height: 100%;
        margin-right: 5px;
        background: #0866da;
        -webkit-transform-origin: right bottom;
        -webkit-animation: load 1s ease infinite;
    }
    .loading span:last-child{
        margin-right: 0px; 
    }
    @-webkit-keyframes load{
        0%{
            opacity: 1;
            -webkit-transform: scale(1);
        }
        100%{
            opacity: 0;
            -webkit-transform: rotate(90deg) scale(.3);
        }
    }
    .loading span:nth-child(1){
        -webkit-animation-delay:0.13s;
    }
    .loading span:nth-child(2){
        -webkit-animation-delay:0.26s;
    }
    .loading span:nth-child(3){
        -webkit-animation-delay:0.39s;
    }
    .loading span:nth-child(4){
        -webkit-animation-delay:0.52s;
    }
    .loading span:nth-child(5){
        -webkit-animation-delay:0.65s;
    }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值