vue自定義底部導航欄Tabbar

如圖所示，要完成類似的一個底部導航切換。

首先。我們需要分爲5個大的VUE文件。可以根據自己的習慣來放在不同的位置。

我將5個主要的VUE文件放在了5個不同的文件夾

然後，在組件文件夾裏新建Tabbar.vue /以及Item.vue文件

Item.vue文件如下

<template>
	<div class="itemWarp flex_mid" @click='changePage'>
		<span v-show='!bol'>
			<slot name='normalImg'></slot>
		</span>
		<span v-show='bol'>
			<slot name='activeImg'></slot>
		</span>
		<span v-text='txt'></span>
	</div>
</template>
<script type="text/javascript">
	export default{
		name: 'Item',
		props:{
			txt:{
				type:String
			},
			page:{
				type:String
			},
			sel:{
				type:String
			}
		},
		computed:{
			bol: function(){
				if(this.sel == this.page){
					return true;
				}
				return false;
			}
		},
		methods:{
			changePage:function(){
				//點擊跳轉對應的頁面
				this.$router.push('/'+this.page);
				this.$emit('change',this.page)
			}
		}
	}
</script>
<style type="text/css">
	.itemWarp{
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.itemWarp span{
		font-size: 12px;
	}

</style>

Tabbar.vue文件如下

<template>
	<div class="tabberWarp" >
		<div class="warp">
			<Item :txt='item.txt' :page='item.page' @change='getVal' v-for='item in tabbarDes':sel='selected'>

				<img :src="item.normalImg" slot='normalImg'>
				<img :src="item.activeImg" slot='activeImg'>
			</Item>
		</div>
	</div>
</template>
<script type="text/javascript">
	import Item from './Item.vue'
	export default{
		components:{
			Item
		},
		data:function(){
			return{
				selected:'skin',
				tabbarDes:[
					{
						txt:'表情',
						page:'skin',
						normalImg:require('../assets/images/zz_07.jpg'),
						activeImg:require('../assets/images/22_03.jpg')
						
					},				
					{
						txt:'皮膚',
						page:'phiz',
						normalImg:require('../assets/images/download_skin_ic.png'),
						activeImg:require('../assets/images/112_26.jpg')
					},
					{
						txt:'詞庫',
						page:'thesaurus',
						normalImg:require('../assets/images/zz_09.jpg'),
						activeImg:require('../assets/images/icon2_03.jpg')
					},
					{
						txt:'賬號',
						page:'account',
						normalImg:require('../assets/images/zz_11.jpg'),
						activeImg:require('../assets/images/cion_03.jpg')
					},
					{
						txt:'設置',
						page:'setup',
						normalImg:require('../assets/images/zz_13.jpg'),
						activeImg:require('../assets/images/22_03.jpg')
					}
				]
			}
		},
		methods:{
			getVal:function(res){
				this.selected = res;
			}
		}
	}
</script>
<style type="text/css">
	.warp{
		width: 100%;
		border-top: 1px solid #eee;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 0;
	}
	.warp img{
		width: 20px;
		height: 20px;
	}
	.tabberWarp img{
		margin-top: 10px;
		margin-bottom: 5px;

	}
	.tabberWarp{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 5px;
		background: #fff;
	}
</style>

Tabbar.vue文件和Item.vue的關係爲父子關係。

Tabbar.vue組件通過v-for循環tabbarDes裏面的數據。再通過props向下傳遞數據給子組件.

Item.vue能接受到父組件傳遞的數據。 

然後在Item.vue組件綁定點擊事件。

$ router.push（ '/' + this.page）爲跳轉到對應的頁面

$ emit（'change'，this.page）爲使用$ emit觸發父組件的自定義事件change，將this.page作爲參數傳遞到父組件中。父組件點擊獲取到傳遞過來的參數。再props傳遞給item.vue組件。在computed計算屬性中。返回不同的布爾值。來做底部圖片的顯示隱藏。

最後僅需要在App.vue中引入的TabBar組件即可。

<template>
  <div id="app">
    <router-view></router-view>
    <Tabbar></Tabbar>
    <div class="empty"></div>
  </div>
</template>

<script>
import Tabbar from'./components/tabbar'
export default {
  name: 'app',
  created:function(){
    this.$router.push('/')
  },
  components:{
    Tabbar
  }
}
</script>

最後需要注意的一點是，在v-for用於循環data中的數據時。有路徑的必須使用require引入的方式。不然會導致路徑錯誤，無法展示