This is the 30th day of my participation in the Wenwen Challenge

preface

In the process of front-end development, it is necessary to make a summary of the common components, especially for the front-end developers who have just started, which is conducive to the mastery of knowledge points, and is conducive to the summary of convenient use of view later. This is true no matter for front-end Vue projects based on mobile terminal or PC terminal. This paper will share a feature frequently used in front-end development: the use of Loading. This paper takes the use of Loading based on mobile terminal Vant as an example to explain, so as to facilitate developers who need to learn and use it.

Loading is introduced

Loading: The Loading icon is used to indicate the transition state during Loading, or to display dynamic effects when Loading data.

The introduction of Loading

In this example, the Loading component in Vant is introduced mainly. The specific introduction steps are as follows: Open the Vue project based on mobile terminal, find the main.js file in the root directory of the project, and import the Loading component directly. Import the Loading component into the main.js file.

import Vue from 'vue'; Import {Loading} from 'vant'; import {Loading} from 'vant'; Vue.use(Loading);Copy the code

Usage scenarios

Loading icon style, color, size, display position, background, text and other Settings can be customized according to the actual business requirements. The style Settings and display of Loading are not described here.

The sample

Examples in this paper are introduced by using the conventional use of Loading. The specific core code is as follows: 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=" No data "/> </van-cell-group> </van-tab> <van-tab class="tab-talent-scout" title=" my" :badge="myRecommendTotal"> <RecommendScreening :subTicketNameData="subTicketName" :tabActive="tabActive" @serchData="serchClick" @serchCancel="serchCancel" /> <van-cell-group class="recommend-group"> <RecommendListItem : myRecommendData recommendData = "" / > < van - - if the empty v =" myRecommendData. MyRecommendList. Length = = = 0 "description =" temporarily no data "/ >  </van-cell-group> </van-tab> <van-loading class="loading-bg" type="spinner" size="24px" v-show="httpLoading"/> </van-tabs> </template>Copy the code

2,

<script> import Container from ".. /.. /components/Container.vue"; Export default {data() {return {httpLoading:false, // Set the loading state to false. }, activated() { this.getBoleRecommendList(); this.getMyRecommendList(); }, created() {}, methods: {async getBoleRecommendList(val = {}) {this.httploading = true; $service.java_recruit. GetBoleRecommendList ({params: {search: val.keyword, }, }) .then((r) => { if (r.status == 200) { this.httpLoading = false; / / network after the request is successful, the loading is set to false, the hidden loading r.d ata. Rows [0]. BoleRecommendList. ForEach ((e) = > {this. BoleRecommendList. Push (e); }); } }).catch((r) => { this.httpLoading = false; Loading this.$toast(" Loading failed! ") ); }); ,}}}; </script>Copy the code

3,

<style scoped> .talent-scout { height: 100%; } /* Set loading display style */. 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>Copy the code

4. Example effect

After the above operations, loading and hiding are realized. The above is all the content of this chapter. Welcome to follow the wechat public account of Sanzhan “Program Ape by Sanzhan” and the Sina Weibo account of Sanzhan “sanzhan 666”. Welcome to follow!