阅读 301

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

这是我参与更文挑战的第30天,活动详情查看:更文挑战

前言

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

001.jpeg

使用场景

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>
复制代码

002.jpeg 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>
复制代码

003.jpeg

004.jpeg

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>
复制代码

005.jpeg

4、示例效果

006.jpeg

经过以上内容的操作之后,就实现了loading的加载和隐藏的使用。以上就是本章的全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

文章分类
前端
文章标签