vue项目学习笔记3

Richard阿辰2024-05-112024-05-23

在components下创建common文件夹，并在里面创建Tabbar文件，内容如下：

<template>
  <div class="tabbar">
    <ul>
      <li
        v-for="(item, index) in routerList"
        :key="index"
        @click="switchTab(item.path)"
      >
        <img
          :src="$route.path.includes(item.path) ? item.selected : item.active"
          alt=""
        />
        <span>{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routerList: [
        {
          title: "首页",
          path: "/home",
          active: "./images/Tabbar/home.png",
          selected: "./images/Tabbar/home-active.png",
        },
        {
          title: "分类",
          path: "/Categories",
          active: "./images/Tabbar/category.png",
          selected: "./images/Tabbar/category-active.png",
        },
        {
          title: "购物车",
          path: "/cart",
          active: "./images/Tabbar/cart.png",
          selected: "./images/Tabbar/cart-active.png",
        },
        {
          title: "我的",
          path: "/user",
          active: "./images/Tabbar/user.png",
          selected: "./images/Tabbar/user-active.png",
        },
      ],
    };
  },
  methods: {
    switchTab(path) {
      // 判断是否是当前路由
      if (path === this.$route.path) return;
      // 对应跳转页面 切换路由
      this.$router.replace(path);
    },
  },
};
</script>
<style scoped>
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 50px;
  background-color: #fff;
}

.tabbar ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}

.tabbar ul li {
  list-style: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 100%;
  display: flex;
}

.tabbar ul li img {
  width: 25px;
  height: 25px;
}

.tabbar li span {
  font-size: 16px;
}
</style>

这是底部栏所有的样式,可以作为一个范本,以后可以拿来多次使用,关于使用的图标,详见B站阿里图标导入方法,我就不介绍了,做这个范本的目的就是因为每次我做项目都要重新找一套图标,重新写样式,实在是没必要每次都从一加一开始写起,有了这个范本可事半功倍的开发,但是当前范本仅限App项目,后台项目的范本太多了不用我做

在需要的地方将以上范本在每一个底部栏组件中调用
import Tabbar from "@/components/common/Tabbar";
git提交遇到的问题2
git pull --tags origin dev
fatal: unable to access 'https://github.com/name/': Failed to connect to github.com port 443 after 21114 ms: Couldn't connect to server
解决办法
git config --global http.proxy http://127.0.0.1:7890
然后再次尝试 git push

找到了一个更简单的底部栏办法

<VanTabbar v-model="active">
  <VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>
  <VanTabbarItem name="order" icon="bars">订单</VanTabbarItem>
  <VanTabbarItem name="me" icon="contact">我的</VanTabbarItem>
</VanTabbar>