【Vue3.0移动端项目--旅游网】-- Loading加载和导航栏bug调试

多一些不为什么的坚持🤳

贤蛋 🥚大眼萌 ，一名很普通但不想普通的程序媛🙊

📝本文章收录于专栏：Vue3.0移动端项目-旅游网

第一篇：【Vue3.0移动端项目–旅游网】–项目初始化搭建

第二篇：【Vue3.0移动端项目–旅游网】–配置tabBar &首页搭建

第三篇：【Vue3.0移动端项目–旅游网】-- 城市页面搭建

第四篇：【Vue3.0移动端项目–旅游网】-- 首页日期和热门推荐处理

第五篇：【Vue3.0移动端项目–旅游网】-- 首页分类和热门精选展示

🧲 新建 loading 分支

通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。

1. 创建新分支并且跳转到改分支上

git checkout -b loading
1

2. 查看分支

git branch
1

⛏ Loding 加载中动画

loding 是在发送网络请求等待结果的期间显示的，顾设置为全局组件

src/components/loading/loading.vue

在App.vue文件中引入该组件

1. 引入 vant 加载中组件

2. 设置判断 loading 显示变量

3. 设置拦截器

4. loading 布局设置

完整代码：

<template>
  <div
    class="loading"
    v-if="mainStore.isShowLoading"
  >
    <div
      class="loding-bg"
      @click="loadingClick"
    >
      <van-loading
        class="loading-moule"
        type="spinner"
        color="#38B0DE"
        size="32px"
        text-size="16px"
        vertical
      >加载中...</van-loading>
    </div>

  </div>
</template>

<script setup>
import { useMainStore } from "@/stores/modules/main";
const mainStore = useMainStore()

const loadingClick = () => {
  mainStore.isShowLoading = false
}
</script>
 
<style lang="less" scoped>
.loading {
  .loding-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .loading-moule {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 99;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

效果：

🛒 导航栏bug调试

bug: 地址栏输入对象的路由页面，导航栏不会触发 active 状态

🧬 Git 管理和代码托管（github）

1. 添加到暂存区

git add .
1

2. 添加到仓库

git commit -m "loading分支"
1

3. 推送代码

git push -u origin loading
1

4. 将本地的 loading 分支 合并到主分支上master （注意要先切换在主分支上）

git checkout mater
1

5. 分支合并

git merge loading
1

6. 更新远程仓库 loading 分支

git push
1

7. 删除tabbar分支

git branch -d loading
1

补充：

网络数据请求地址数据

项目github 地址：https://github.com/fdfd-0313/cz-trip.git