vue底部导航栏的封装使用

一、效果截图

---

二、项目结构

三、代码内容

1. 准备图片

在assets文件夹中存放所需要的icon图片，点击时和未点击时两类。

2. 创建页面

在views文件夹下创建所需要的页面，这里一共有三个。

3. 配置路由

在router文件夹下的index.js中配置路由。（部分需修改的代码如下）

import Home from '../views/Home.vue'
import Unique from '../views/Unique.vue'
import Me from '../views/Me.vue'

const routes = [
  {
    path: '/unique',
    name: 'Unique',
    component: Unique
  },
  {
    path: '/me',
    name: 'Me',
    component: Me
  },
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

4. 在components文件夹下创建组件NavBar.vue并写入代码

<template>
  <router-view></router-view>
  <div class="navbar">
    <ul>
      <li
        v-for="(item, index) in items"
        :key="index"
        @click="changeToggle(item.to)"
      >
        <p>
          <img
            :src="$route.path == item.to ? item.activeImg : item.normalImg"
            alt=""
            width="24"
            height="24"
          />
        </p>
        <p class="text" :class="{ active: item.to == $route.path }">
          {{ item.text }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      path: "",
      items: [
        {
          text: "首页",
          to: "/",
          normalImg: require("../assets/home_0.png"),
          activeImg: require("../assets/home_1.png"),
        },
        {
          text: "独家",
          to: "/unique",
          normalImg: require("../assets/unique_0.png"),
          activeImg: require("../assets/unique_1.png"),
        },
        {
          text: "我的",
          to: "/me",
          normalImg: require("../assets/me_0.png"),
          activeImg: require("../assets/me_1.png"),
        },
      ],
    };
  },
  methods: {
    changeToggle(value) {
      this.$router.push(value);
    },
  },
};
</script>

<style scoped>
.navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-bottom: 10px;
}
.navbar ul {
  list-style: none;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar ul li p {
  padding: 0;
  margin: 0;
}
.navbar ul li p .text {
  font-size: 14px;
  color: #999999;
}
.active {
  color: #ea5520;
}
</style>

5. 在App.vue中调用组件

<template>
  <NavBar></NavBar>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  components: {
    NavBar
  }
}
</script>