写点什么

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

作者:三掌柜
  • 2021 年 12 月 27 日
  • 本文字数:2109 字

    阅读完需:约 7 分钟

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

前言

在前端开发过程中,常用的组件有必要做一下使用的总结,尤其是对于刚入门的前端开发者来说既有利于知识点的掌握,又有利于总结归纳方便后期使用查看。不管是基于移动端还是 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>
复制代码



4、示例效果


经过以上内容的操作之后,就实现了 loading 的加载和隐藏的使用。


最后

以上就是本章的全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!

发布于: 4 小时前
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
12月日更、28 天写作计划第二十六天
4 小时前
回复
没有更多了
前端开发:基于移动端的Vue项目的Loading使用