如果组件需要引入样式,直接: @import即可。
一般tabbar的控件高度是49px 是专门研究过的?? 总之49px即可!
开发阶段, 分解TabBar,结合插槽(div 因为插槽会覆盖),所有代码如下 注释已写出:
这里是项目结构,,
APP.vue:
<template>
<div id="app">
<router-view> </router-view>
<tab-bar>
<tab-bar-item path="/home" Color="blue">
<img slot="item-img-inactive" src="./assets/img/tabbar/Home.png" alt="">
<img slot="item-img-active" src="./assets/img/tabbar/HomeRed.png" alt="">
<p slot="item-text">首页</p>
</tab-bar-item>
<tab-bar-item path="/category" Color="blue">
<img slot="item-img-inactive" src="./assets/img/tabbar/classify.png" alt="">
<img slot="item-img-active" src="./assets/img/tabbar/classifyRed.png" alt="">
<p slot="item-text">分类</p>
</tab-bar-item>
<tab-bar-item path="/cart" Color="blue">
<img slot="item-img-inactive" src="./assets/img/tabbar/Car.png" alt="">
<img slot="item-img-active" src="./assets/img/tabbar/CarRed.png" alt="">
<p slot="item-text">购物车</p></tab-bar-item>
<tab-bar-item path="/user" Color="blue">
<img slot="item-img-inactive" src="./assets/img/tabbar/User.png" alt="">
<img slot="item-img-active" src="./assets/img/tabbar/UserRed.png" alt="">
<p slot="item-text">个人</p></tab-bar-item>
</tab-bar>
</div>
</template>
<script>
import TabBar from './components/tabbar/TabBar' //导入TabBar组件
import TabBarItem from './components/tabbar/TabBarItem' //导入TabBarItem组件
export default {
name:"App",
components: {TabBar,TabBarItem},
}
</script>
<style>
</style>
App.vue app组件
TabBar.vue:
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name: "TabBar"
}
</script>
<style scoped>
#tab-bar{
display: flex; /*flex布局*/
position: fixed; /*底部显示*/
left: 0;
right: 0;
bottom: 0;
box-shadow: 0px -3px 6px rgba(0,0,0,.06);
}
</style>
TabBar组件
TabBarItem.vue:
<template>
<div class="tab-bar-item" @click="itemClick"> <!--点击跳转itemClick-->
<div v-if="!isActive">
<slot name="item-img-inactive"></slot> <!--未选中图-->
</div>
<div v-else>
<slot name="item-img-active"></slot> <!--选中图-->
</div>
<div :style="activeColor" :class="{active:isActive}">
<slot name="item-text"></slot>
</div>
</div>
</template>
<script>
export default {
name: "TabBarItem",
props:{
path:String, //这个path是动态的 在标签哪里的属性直接取值 所以达到跳转路由的作用
Color:{
type:String,
default:"red"
}
},
methods:{
itemClick(){
this.$router.replace(this.path);
}
},
computed:{
isActive(){ //计算属性计算 isActive 是否true/false ,小算法算当前路由
return this.$route.path.indexOf(this.path) !== -1;
},
activeColor(){
return this.isActive ? {color:this.Color}:{};
}
}
}
</script>
<style scoped>
@import "../../assets/css/base.css"; /*导入CSS*/
.tab-bar-item{
flex: 1 ; /*分1行显示*/
text-align: center;/*文本居中*/
height: 49px; /*控件高49px*/
font-size: 15px;/*设置字体大小*/
}
.tab-bar-item img{
width: 23px; /*设置图标整体大小*/
height: 23px;
vertical-align: middle; /*设置图片密度*/
margin-top: 5px;/*设置图片底部位置*/
}
</style>
TabBarItem.vue
路由:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const Cart = () => import('../views/cart/Cart')
const User = () => import('../views/user/User')
const routes = [
{path:'/home',component:Home},
{path:'/category',component:Category},
{path:'/cart',component:Cart},
{path:'/user',component:User},
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
index.js 路由
这四个组件不列举 因为只有一个p标签。
最后运行:
这里的字体颜色是可以更改的,因为父组件传递给了子组件。
看不懂就看:
https://www.bilibili.com/video/BV15741177Eh?p=122
https://www.bilibili.com/video/BV15741177Eh?p=123
View Code
作者:咸瑜