Vue-cli4——TabBar底部导航栏代码解析
Day1
文章目录
- Vue-cli4——TabBar底部导航栏代码解析
- 前言
- 目录
- 总结
前言
此文章根据官方文档及些网络资料编写,仅供个人使用。
提示:以下是本篇文章正文内容,下面案例可供参考
目录
tabbar
src
components
tabbar
TabBar.vue
TabBarItem.vue
MainTabBar.vue
router
index.js
views
cart
Cart.vue
category
Category.vue
home
Home
profile
Profile
App.vue
源码在下面自提,我在这里简单讲一下项目结构
- 首先!我先按照项目顺序将下来
-
TabBar.vue
:该文件是定义导航栏的框架,也就是背景。 -
TabBarItem.vue
:该文件是定义item框架,例如该如何展示导航栏的内容,以及点击导航栏有什么效果,反应什么的。 -
MainTabBar.vue
用来显示具体的内容,以及设置需要的样式。
- 第二步我来讲解下功能
- 设置点击某个导航,显示导航页面
TabBarItem.vue
- 当点击到该区域时执行
itemClick
方法,然后从props
中获取到path地址,最后进入到该地址
<div class="tab-bar-item" @click="itemClick">
props: {
path: String
},
methods: {
itemClick() {
this.$router.replace(this.path)
}
}
MainTabBar.vue
- 设置导航的地址
<tab-bar-item path="/home">
<tab-bar-item path="/catagory">
<tab-bar-item path="/cart">
<tab-bar-item path="/profile">
- 结论:
TabBarItem.vue
中的this.path调用的其实是MainTabBar.vue
中的path地址
- 点击某个导航栏时,该导航栏更改图标
TabBarItem.vue
- 如果是活跃(被点击)时
isActive
会返回true,否则返回false,这里取反,活跃时就执行下面活跃的插槽
<div v-if="!isActive">
<slot name="item-icon"></slot>
</div>
<div v-else>
<slot name="item-icon-action"></slot>
</div>
- 查找
this.$route.path
中有没有this.path
props: {
path: String
},
computed: {
isActive(){
// indexOf是查找this.$route.path有没有this.path 找不到就会返回-1
return this.$route.path.indexOf(this.path) !== -1
}
- 结论:当你点击图标的时候,
$route.path
的地址就是你点击的path地址,将该地址与MainTabBar.vue
中的4个path比较,当有一个相同,则将那个改变图标。
- 点击某个导航栏时,更改文字颜色,文字颜色随
MainTabBar.vue
设置而变化
TabBarItem.vue
- 动态样式绑定名为
activeStyle
的计算属性,activeStyle
:如果isActive不为false(意思是设置活跃的那个导航颜色),则将样式返回给上面的style
样式
<div :style="activeStyle">
<slot name="item-text"></slot>
</div>
props: {
path: String,
activeColor: {
type: String,
default: 'red'
}
},
computed: {
activeStyle(){
return this.isActive ? {color: this.activeColor}:{}
}
},
MainTabBar.vue
- 将导航栏的文字颜色设置为蓝色
<tab-bar-item path="/home" activeColor="blue">
<tab-bar-item path="/catagory" activeColor="blue">
<tab-bar-item path="/cart" activeColor="blue">
<tab-bar-item path="/profile" activeColor="blue">
- 结论:
TabBarItem.vue
获取到MainTabBar.vue
的activeColor颜色,将样式改为该颜色
components/tabbar/TabBar.vue
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name: "TabBar"
}
</script>
<style scoped>
#tab-bar {
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -1px 1px rgba(100,100,100,.2);
}
</style>
components/tabbar/TabBarItem.vue
<template>
<!--所有的item都展示同一个图片, 同一个文字-->
<div class="tab-bar-item" @click="itemClick">
<div v-if="!isActive">
<slot name="item-icon"></slot>
</div>
<div v-else>
<slot name="item-icon-action"></slot>
</div>
<div :style="activeStyle">
<slot name="item-text"></slot>
</div>
<!--<img src="../../assets/img/tabbar/home.svg" alt="">-->
<!--<div>首页</div>-->
</div>
</template>
<script>
export default {
name: "TabBarItem",
props: {
path: String,
activeColor: {
type: String,
default: 'red'
}
},
/*data() {
return {
isActive: true
}
},*/
computed: {
isActive(){
// indexOf是查找this.$route.path有没有this.path 找不到就会返回-1
return this.$route.path.indexOf(this.path) !== -1
},
activeStyle(){
return this.isActive ? {color: this.activeColor}:{}
}
},
methods: {
itemClick() {
this.$router.replace(this.path)
}
}
}
</script>
<style scoped>
.active {
color: red;
}
</style>
components/MainTabBar.vue
<template>
<tab-bar>
<tab-bar-item path="/home" activeColor="blue">
<template v-slot:item-icon>
<img src="../assets/img/tabbar/home.svg" alt="">
</template>
<template v-slot:item-icon-action>
<img src="../assets/img/tabbar/home_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>首页</div>
</template>
</tab-bar-item>
<tab-bar-item path="/catagory" activeColor="blue">
<template v-slot:item-icon>
<img src="../assets/img/tabbar/category.svg" alt="">
</template>
<template v-slot:item-icon-action>
<img src="../assets/img/tabbar/category_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>分类</div>
</template>
</tab-bar-item>
<tab-bar-item path="/cart" activeColor="blue">
<template v-slot:item-icon>
<img src="../assets/img/tabbar/shopcart.svg" alt="">
</template>
<template v-slot:item-icon-action>
<img src="../assets/img/tabbar/shopcart_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>购物车</div>
</template>
</tab-bar-item>
<tab-bar-item path="/profile" activeColor="blue">
<template v-slot:item-icon>
<img src="../assets/img/tabbar/profile.svg" alt="">
</template>
<template v-slot:item-icon-action>
<img src="../assets/img/tabbar/profile_active.svg" alt="">
</template>
<template v-slot:item-text>
<div>我的</div>
</template>
</tab-bar-item>
</tab-bar>
</template>
<script>
import TabBar from "@/components/tabbar/TabBar";
import TabBarItem from "@/components/tabbar/TabBarItem";
export default {
name: "MainTabBar",
components: {
TabBarItem,
TabBar
}
}
</script>
<style scoped>
.tab-bar-item {
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item img {
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/cart',
name: 'Cart',
component: () => import('../views/cart/Cart')
},
{
path: '/home',
name: 'Home2',
component: () => import('../views/home/Home')
},
{
path: '/catagory',
name: 'Catagory',
component: () => import('../views/category/Category')
},
{
path: '/profile',
name: 'Profile',
component: () => import('../views/profile/Profile')
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
views/cart/Cart.vue
<template>
<h2>购物车</h2>
</template>
<script>
export default {
name: "Cart"
}
</script>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<router-view></router-view>
<main-tab-bar/>
</div>
</template>
<script>
import MainTabBar from "@/components/MainTabBar";
export default {
name: 'App',
components: {
MainTabBar
}
}
</script>
<style lang="scss">
@import "./assets/css/base.css";
</style>
总结