超詳細教程實現Vue底部導航欄TabBar
阿新 • • 發佈：2021-12-02
目錄
- 專案介紹：
- 專案目錄：
- TabBar效果預覽：
- TabBar實現思路
- 一、如果在下方有一個單獨的TabBar元件，如何封裝
- 二、TabBar中現實的內容由外界決定。
- 三、自定義TabBarItem，可以傳入圖片和文字
- 專案檔案目錄建立
- 檔案目錄介紹
- 檔案起別名程式碼
- App.程式碼
- MainTabBar.vue程式碼
- TabBar.vue程式碼
- TabBarItem.vue程式碼
- index.路由配置程式碼
- home.vue程式碼
- category.vue程式碼
- profile.vue程式碼
- cart.vue程式碼
- Base.程式碼
- img圖片資源
- 總結：
- 主要難點：
專案介紹：
需求：要求tabbar中的文字可動態更改，文字對應的圖片動態更改動態增加，文字顏色對應更改，Thttp://www.cppcns.com
abBarItem的圖片動態更改和增加，整個專案靈活化，利用插槽，路由，父子元件的值傳遞，利用$router實現點選item就會顯示對應的頁面。綜合性極強，專案開發中遇到類似專案，只需複製其中主要程式碼即可搭建專案的大體框架。
專案目錄：
TabBar效果預覽：
TabBar實現思路
一、如果在下方有一個單獨的TabBar元件，如何封裝
- 自定義tabbar元件，在APP中使用。
- 讓TabBar處於底部，並且設定相關的樣式。
二、TabBar中現實的內容由外界決定。
- 定義插槽。
- flex佈局評分TabBar。
三、自定義TabBarItem，可以傳入圖片和文字
- 自定義tabbarItem，並且定義兩個插槽:圖片，文字。
- 給兩個插槽外層包裝div，用於設定樣式。
- 填充插槽，實現底部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錯誤，這裡開始先建立檔案別名，vue建立檔案別名詳解
找到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="超詳細教程實現Vue底部導航欄TabBar" >
<img slot="item-icon-active" src="~assets/img/tabbar/shouye.active.png" alt="超詳細教程實現Vue底部導航欄TabBar">
<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="超詳細教程實現Vue底部導航欄TabBar">
<img slot="item-icon-active" src="~assets/img/tabbar/fenlei.active.png" alt="超詳細教程實現Vue底部導航欄TabBar">
<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="超詳細教程實現Vue底部導航欄TabBar">
<img slot="item-icon-active" src="~assets/img/tabbar/gouwuche.active.png" alt="超詳細教程實現Vue底部導航欄TabBar">
<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="超詳細教程實現Vue底部導航欄TabBar">
<img slot="item-icon-active" src="~assets/img/tabbar/wode.active.png" alt="超詳細教程實現Vue底部導航欄TabBar">
<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
}
}
</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 :style="activeStyle"><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(){
//判斷
TnroWdu //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.$router.replace(this.path)
}
}
}
</script>
<style>
#tab-bar{
display: flex;
}
#tab-bar{
background-color: #f6f6f6;
border-top: 2px #ccc;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow:0px -1px 1px rgba(100,100,.2) ;
}
.tab-bar-item{
flex: 1;
text-aTnroWdulign: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item img{
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 3px;
}
.active{
color: red;
}
</style>
index.js路由配置程式碼
router資料夾下的index檔案為路由的配置：
import Vue from 'vue'
import VueRouter from 'vue-router';
const Home = () => import('views/home/home')
const Category = () => import('views/category/category')
const Cart = () => import('views/cart/cart')
const Profile = () => import('../views/profile/profile')
//1.安裝外掛
Vue.use(VueRouter)
//2.建立路由物件
const routes = [
{
path:'',redirect:'/home'
},{
path:'/home',component:Home
},{
path:'/category',component:Category
},{
path:'/cart',component:Cart
},{
path:'/profile',component:Profile
}
]
const router = new VueRouter({
routes,mode:'history'
})
//3.匯出router
export default router
views中的home程式碼，cart程式碼，profile程式碼，category程式碼：
home.vue程式碼
<template>
<h2>首頁</h2>
</template>
<script>
export default {
name:"Home"
}
</script>
<style>
</style>
category.vue程式碼
<template>
<h2>分類</h2>
</template>
<script>
export default {
name:"Home"
}
</script>
<style>
</style>
profile.vue程式碼
<template>
<h2>個人</h2>
</template>
<script>
export default {
name:"Home"
}
</script>
<style>
</style>
cart.vue程式碼
<template>
<h2>購物車</h2>
</template>
<script>
export default {
name:"Home"
}
</script>
<style>
</style>
Base.css程式碼
CSS檔案下的base.css內容：
body{
padding: 0px;
margin: 0px;
}
img圖片資源
實現完成~
總結：
專案綜合性很大，其中有插槽，路由，子元件父元件的值得傳遞，別名設定的各種知識。
專案動態內容：tabbar的文字，圖片，顏色都可以動態改變，下次類似專案直接可以引用這些檔案。
主要難點：
一、當點選到對應的TabBarItem上的時候改變圖片顏色，文字顏色，這裡是用當前的活躍路由和傳過來的地址是否對應，如果對應就會變為true返貨來為false:
computed:{
isActive(){
//判斷
return this.$route.path.indexOf(this.path)?false:true
},methods:{
itemClick(){
this.$router.replace(this.path)
}
}
上面的程式碼還有其他方法：
return this.$route.path.indexOf(this.path) !== -1
return this.$route.path === this.path
二、父元件傳值問題，父元件傳過來對應的檔案路徑，對應的字型顏色，子元件接受並使用：
export default {
name:"TabBarItem",data(){
return {}
},
專案完成~
到此這篇關於Vue實現TabBar底部導航欄的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。