怎么在vue中自定義底部導(dǎo)航欄Tabbar？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

目前創(chuàng)新互聯(lián)建站已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管運(yùn)營、企業(yè)網(wǎng)站設(shè)計、象山網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

首先。我們需要分為5個大的VUE文件。可以根據(jù)自己的習(xí)慣來放在不同的位置。

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

然后,在components文件夾里新建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(){
  //點(diǎn)擊跳轉(zhuǎn)對應(yīng)的頁面
  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:'設(shè)置',
   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的關(guān)系為父子關(guān)系.

Tabbar.vue組件 通過v-for循環(huán)tabbarDes里面的數(shù)據(jù).再通過 props 向下傳遞數(shù)據(jù)給子組件.Item.vue能接受到父組件傳遞的數(shù)據(jù).

Item.vue組件綁定點(diǎn)擊事件.

this.$router.push('/'+this.page);為跳轉(zhuǎn)到對應(yīng)的page

this.$emit('change',this.page)為使用$emit 觸發(fā)父組件的自定義事件 change,將this.page作為參數(shù)傳遞到父組件中.父組件點(diǎn)擊獲取到傳遞過來的參數(shù).再通過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>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)站標(biāo)題：怎么在vue中自定義底部導(dǎo)航欄Tabbar
鏈接地址：http://www.rwnh.cn/article30/psgppo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、App開發(fā)、云服務(wù)器、企業(yè)建站、ChatGPT、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)