前端开发：基于移动端的 Vue 项目的 Loading 使用

2021 年 12 月 27 日
本文字数：2109 字
阅读完需：约 7 分钟

前言

在前端开发过程中，常用的组件有必要做一下使用的总结，尤其是对于刚入门的前端开发者来说既有利于知识点的掌握，又有利于总结归纳方便后期使用查看。不管是基于移动端还是 PC 端的前端 Vue 项目都是如此，那么本文就来分享一下在前端开发的时候经常使用的一个功能：Loading 的使用，本文以基于移动端 Vant 的 Loading 使用为例来讲解，方便有需要的开发者学习使用。

Loading 介绍

Loading 加载：加载图标，用来表示加载过程中的过渡状态，或者说是在加载数据的时候显示动效，起到缓冲作用。

引入 Loading

本示例以 Vant 下的 Loading 组件引入的方法为主，具体的引入步骤如下所示：

打开基于移动端的 Vue 项目，然后在项目的根目录里面找到 main.js 文件，然后直接引入 Loading 组件，其实项目里面如果引入了 Vant 组件，就不需要引入。这里直接在 main.js 文件中引入 Loading 组件即可。

import Vue from 'vue';  //框架如果已经引入过的话，这句就不用再加进去了
import { Loading } from 'vant';
Vue.use(Loading);

复制代码

使用场景

Loading 的使用其实也可以根据实际开发过程中的具体需求来选择，可以自定义 Loading 加载的图标样式、颜色、大小、以及显示的位置和背景、文案等设置，具体的使用还是要根据实际的业务需求来做决定，这里不再一一介绍 Loading 加载的全部样式设置和显示情况。

示例

本文示例以 Loading 加载的常规使用来做介绍，具体的核心代码如下所示：

1、

<template>
  <van-tabs v-model="tabActive" color="#459CFF" title-active-color="#459CFF"  sticky line-width="100px" class="talent-scout">
    <van-tab  class="tab-talent-scout"  title="推荐" :badge="boleRecommendTotal" >
      <BoleScreening  :detailData="boleDetail" :tabActive="tabActive" @searchEvent="onSearch"  @cancelEvent="cancelClick" />
          <van-cell-group class="recommend-group">
            <BoleScreeningItem :detailData="boleRecommendList" />
           <van-empty v-if="boleRecommendList.length === 0"  description="暂无数据" />
         </van-cell-group>
    </van-tab>
    <van-tab class="tab-talent-scout"  title="我的"  :badge="myRecommendTotal">
      <RecommendScreening  :subTicketNameData="subTicketName"  :tabActive="tabActive"  @serchData="serchClick" @serchCancel="serchCancel" />
          <van-cell-group class="recommend-group">
            <RecommendListItem :recommendData="myRecommendData" />
            <van-empty  v-if="myRecommendData.myRecommendList.length === 0"  description="暂无数据"  />
          </van-cell-group>
    </van-tab>
    <van-loading class="loading-bg" type="spinner" size="24px" v-show="httpLoading"/>
  </van-tabs>
</template>

复制代码

2、

<script>
import Container from "../../components/Container.vue";
export default {
  data() {
    return {
      httpLoading:false,  //设置loading的默认初始值，默认状态是关闭状态，所以要置为false
    };
  },
  activated() {
    this.getBoleRecommendList();
    this.getMyRecommendList();
  },
  created() {},
  methods: {
    //获取推荐列表
    async getBoleRecommendList(val = {}) {
      this.httpLoading = true;  //网络请求开始的时候把loading设置为true，显示loading
      this.$service.java_recruit
        .getBoleRecommendList({
          params: {
            search: val.keyword,
          },
        })
        .then((r) => {
          if (r.status == 200) {
            this.httpLoading = false;  //网络请求成功之后，把loading设置为false，隐藏loading
            r.data.rows[0].boleRecommendList.forEach((e) => {
              this.boleRecommendList.push(e);
            });
          }
        }).catch((r) => {
          this.httpLoading = false; //网络请求失败这里也要对loading做隐藏处理，不然在失败之后会一直显示loading
          this.$toast("加载失败！");
        });
    },
  },
};
</script>

复制代码

3、

<style scoped>
.talent-scout {
  height: 100%;
}
/*设置loading显示的样式*/
.loading-bg {
  position: fixed;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  top: 50%;
  left: 50%;
  text-align: center;
  line-height: 60px;
  border-radius: 5px;
}
</style>