- vue 安装
npm create vue
注意:需要安装路由 vue-router
2. 定义主要页面
比如:
import Home from '../page/Home.vue'
import Discover from '../page/Discover.vue'
import Cate from '../page/Cate.vue'
import Me from '../page/Me.vue'
const routes = [
{ path: '/home', component: Home },
{ path: '/cate', component: Cate },
{ path: '/discover', component: Discover },
{ path: '/me', component: Me },
]
结构如下
3. 定义一个tabbar 组件
<script setup>
import { useRoute } from 'vue-router'
// 当前路由
const route = useRoute()
const props = defineProps({
path: {
type: String,
required: true,
default: ''
},
});
console.log(props.path);
const isActive = (path)=>{
if (route.path === "/"){
return "/home".indexOf(path) !== -1;
}
return route.path.indexOf(path) !== -1;
}
</script>
<template>
<div id="tab-bar">
<div class="tab-bar-item" :class="{active:isActive('/home')}">
<RouterLink to="/home">
<img src="@/assets/img/tabbar/home.svg" alt="...">
<div class="item-text">首页</div>
</RouterLink>
</div>
<div class="tab-bar-item" :class="{active:isActive('/cate')}">
<RouterLink to="/cate">
<img src="@/assets/img/tabbar/home.svg" alt="...">
<div class="item-text" >分类</div>
</RouterLink>
</div>
<div class="tab-bar-item" :class="{active:isActive('/discover')}">
<RouterLink to="/discover">
<img src="@/assets/img/tabbar/home.svg" alt="...">
<div class="item-text">发现</div>
</RouterLink>
</div>
<div class="tab-bar-item" :class="{active:isActive('/me')}">
<RouterLink to="/me">
<img src="@/assets/img/tabbar/home.svg" alt="...">
<div class="item-text">我的</div>
</RouterLink>
</div>
</div>
</template>
<style scoped>
#tab-bar{
/* 流体布局,使得这个元素占据一行 */
display: flex;
height: 49px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #f6f6f6;
font-size: 14px;
box-shadow: 0 -3px 1px rgba(100,100,100,.08);
}
.tab-bar-item.active .item-text{
color: red;
}
.tab-bar-item{
/* 使得这些元素均等分布在流体元素中 */
flex: 1;
text-align: center;
}
.tab-bar-item img{
width: 24px;
height: 24px;
/* 使得图片下面不要离文字太远 */
/* middle: 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐 */
vertical-align: middle;
}
</style>
- 在app.vue 中引入tabbar
<script setup>
import Tabbar from "@/components/Tabbar/Index.vue";
</script>
<template>
<RouterView />
<Tabbar></Tabbar>
</template>
<style scoped>
</style>
把本人的练习代码 有需要的自己看下
https://gitee.com/yu_yang_technology/htmlexercise