超详细教程实现Vue底部导航栏TabBar
⽬录
项⽬介绍：
项⽬⽬录：
TabBar效果预览：
TabBar实现思路
⼀、如果在下⽅有⼀个单独的TabBar组件，如何封装
⼆、TabBar中现实的内容由外界决定。
三、⾃定义TabBarItem，可以传⼊图⽚和⽂字
项⽬⽂件⽬录建⽴
⽂件⽬录介绍
⽂件起别名代码
App.vue代码
MainTabBar.vue代码
TabBar.vue代码
TabBarItem.vue代码
index.js路由配置代码
home.vue代码
category.vue代码
profile.vue代码
cart.vue代码
Base.css代码
img图⽚资源
总结：
主要难点：
项⽬介绍：
需求：要求tabbar中的⽂字可动态更改，⽂字对应的图⽚动态更改动态增加，⽂字颜⾊对应更改，TabBarItem的图⽚动态更改和增加，整个项⽬灵活化，利⽤插槽，路由，⽗⼦组件的值传递，利⽤$router实现点击item就会显⽰对应的页⾯。综合性极强，项⽬开发中遇到类似项⽬，只需复制其中主要代码即可搭建项⽬的⼤体框架。
项⽬⽬录：
TabBar效果预览：
TabBar实现思路
⼀、如果在下⽅有⼀个单独的TabBar组件，如何封装
1. ⾃定义tabbar组件，在APP中使⽤。
2. 让TabBar处于底部，并且设置相关的样式。
⼆、TabBar中现实的内容由外界决定。
1. 定义插槽。
2. flex布局评分TabBar。
三、⾃定义TabBarItem，可以传⼊图⽚和⽂字
1. ⾃定义tabbarItem，并且定义两个插槽：图⽚，⽂字。
2. 给两个插槽外层包装div，⽤于设置样式。
3. 填充插槽，实现底部TabBar的效果。
⽅法可⾏，动⼿实现，⾸先介绍⼀下⽬录
项⽬⽂件⽬录建⽴
⽂件⽬录介绍
我建⽴⼀个views⽂件夹，⾥⾯建⽴五个⽂件，五个⽂件⾥⾯包含了五个vue⽂件，分别对应着导航栏下的每个按钮。
在assets下建⽴css和img⽂件夹，放置tabbar按钮所需的图⽚和基础类
在component⽂件夹中建⽴⼀个MainTabBar.vue⽂件和tabbar⽂件夹，tabbar⽂件夹⾥放置MainTabBar的⼦组件和各种插槽关联⽂件。
router⽂件夹下的index⽂件配置路由⽂件
main.js是项⽬的⼊⼝⽂件，项⽬中所有的页⾯都会加载main.js，所以main.js，主要有三个作⽤：
实例化VUE
放置项⽬中经常会⽤到的插件和CSS样式，例如⽹络请求axios和vue-resource，图⽚懒加载模块：vue-;azyload 存储全局变量例如基本信息等
各个⽂件夹中的代码实现
第⼀步、⽂件很多，引⽤会常常带来404错误，这⾥开始先建⽴⽂件别名，
到resolve对象，在alias中写⼊各个⽂件的别名：
⽂件起别名代码
代码：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'views': resolve('src/views'),
}
},
App.vue代码
App.vue中引⽤MainTabBar组件和各个tabbaritem对应的⽂件：
<template>
<div id="app">
<router-view></router-view>
<main-tab-bar></main-tab-bar>
</div>
</template>
<script type="module">
import MainTabBar from 'components/MainTabBar'
export default {
name: 'App',
components:{
MainTabBar
}
}
</script>
<style>
@import "assets/css/base";
</style>
MainTabBar.vue代码
MainTabBar组件代码：要求组件满⾜可修改TabBarItem的个数，颜⾊，⽂字，等都是动态的。需要创建各类插槽。<template>
<div>
<tab-bar>
<tab-bar-item path="/home" activeColor="purple">
<img slot="item-icon" src="~assets/img/tabbar/shouye.png" alt="" >
<img slot="item-icon-active" src="~assets/img/tabbar/shouye.active.png" alt="">
<div slot="item-text">⾸页</div>
</tab-bar-item>
<tab-bar-item path="/category" activeColor="purple">
<img slot="item-icon" src="~assets/img/tabbar/fenlei.png" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/fenlei.active.png" alt="">
<div slot="item-text">分类</div>
</tab-bar-item>
<tab-bar-item path="/cart" activeColor="purple">
<img slot="item-icon" src="~assets/img/tabbar/gouwuche.png" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/gouwuche.active.png" alt="">
<div slot="item-text">购物车</div>
</tab-bar-item>
<tab-bar-item path="/profile" activeColor="purple">
<img slot="item-icon" src="~assets/img/tabbar/wode.png" alt="">
<img slot="item-icon-active" src="~assets/img/tabbar/wode.active.png" alt="">
<div slot="item-text">我的</div>
</tab-bar-item>
</tab-bar>
</div>
</template>
<script>
import TabBar from 'components/tabbar/TabBar'
import TabBarItem from 'components/tabbar/TabBarItem'
export default {
name:"MainTabBar",
components:{
TabBar,
TabBarItem网站底部代码js特效
}
}
</script>
<style>
</style>
TabBar.vue代码
TabBar.vue⽂件，改⽂件为MainTabBar.vue中的⼦组件：
<template>
<div id="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name:'TabBar'
}
</script>
<style>
</style>
TabBarItem.vue代码
TabBarItem.vue为MainTabBar.vue的⼦组件
<template>
<div class="tab-bar-item" @click="itemClick">
<div v-if="!isActive">
<slot name="item-icon"></slot>
</div>
<div v-else>
<slot name="item-icon-active"></slot>
</div>
<div :><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name:"TabBarItem",
props:{
path:String,
activeColor:{
type:String,
default:'red'
}
},
data(){
return {
// isActive:true
}
},
computed:{
isActive(){
//判断
//return this.$route.path.indexOf(this.path) !== -1
//return this.$route.path === this.path
return this.$route.path.indexOf(this.path)?false:true
},
activeStyle(){
return this.isActive?{color:this.activeColor}:{}
}
},
methods:{
itemClick(){
this.$place(this.path)
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。