利用uni-app怎么對底部導航欄進行自定義

利用uni-app怎么對底部導航欄進行自定義？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

1. tabbar 組件

<template>
 <view class="tabbar-container">
  <view
   :
   v-for="(item, index) in tabbarList"
   :key="index"
   
   @click="switchTab(index)"
  >
   <view :class="'iconfont ' + item.icon" />
   <view class="title">{{ item.title }}</view>
  </view>
 </view>
</template>

mounted(){
 let dom = uni.createSelectorQuery().select('.tabbar-container')
  dom.boundingClientRect(e => {
   // tabbarHeight使用頻次較高，就設為全局變量了
    getApp().globalData.tabbarHeight = e.height
  }).exec()
}

<style scoped lang="scss">
.iconfont {
 font-size: 18px;
}

.tabbar-container {
 display: flex;
 justify-content: space-evenly;
 text-align: center;
 padding: 10px 0;
 background-color: #fff;
 box-shadow: 0 -1.5px 3px #eee;
 z-index: 999;

 .title {
  font-size: 12px;
 }
}
</style>

2. 引入

這里使用的是swiper，duration為0是為了關閉頁面切換動畫效果，

<template>
 <view :>
  <tab-bar
   :currentIndex="currentIndex"
   class="tabbar-container"
   @getCurrentIndex="getCurrentIndex"
  />
  <swiper duration="0" disable-touch :current="currentIndex" >
   <swiper-item>
    <scroll-view scroll-y >
     <home />
    </scroll-view>
   </swiper-item>
   <swiper-item>
    <todo-page />
   </swiper-item>
   <swiper-item>
    <launch-task />
   </swiper-item>
   <swiper-item>
    <my-page />
   </swiper-item>
  </swiper>
 </view>
</template>

mounted() {
 this.tabbarHeight = getApp().globalData.tabbarHeight
},

getCurrentIndex(e) {
 this.currentIndex = e;
}

看完上述內容，你們掌握利用uni-app怎么對底部導航欄進行自定義的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！