需求：要求小程序，中間的tabBar自定義凸起或者圖標變大；
問題：查看uni-app的tabBar文檔可知，小程序是不支持midButton的；

解決思路：隱藏uni-app原有的tabBar，然后換成自己手寫的導航欄，進行定位和自定義樣式；

小程序頁面截圖：

H5頁面截圖：

步驟和文件結構如下：

一、pages.json:正常書寫，注意H5的需要加上midButton部分

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path": "pages/midell/index","style": {"navigationBarTitleText": "midell"}},{"path": "pages/mine/index","style": {"navigationBarTitleText": "mine"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","app-plus": {"background": "#efeff4"}},"tabBar": {"color": "#999999","selectedColor": "#f00","borderStyle": "black","backgroundColor": "#ffffff","midButton": {"text": "中間","pagePath": "pages/midell/index","iconPath": "static/api.png","selectedIconPath": "static/apiHL.png"},"list": [{"pagePath": "pages/index/index","iconPath": "static/template.png","selectedIconPath": "static/templateHL.png","text": "簡介"},{"pagePath": "pages/midell/index","iconPath": "static/api.png","selectedIconPath": "static/apiHL.png","text": "中間"},{"pagePath": "pages/mine/index","iconPath": "static/component.png","selectedIconPath": "static/componentHL.png","text": "我的"}]} }

二、添加公共組件midell-box頁面，在里面寫上自定義導航欄和樣式；（注意：公共組件要符合easycom規范 無需引入直接使用）

邏輯：調用uni.hideTabBar()去除原生導航欄，再根據 centerItem: true ，控制特殊樣式

midell-box.vue：可直接復制（注意你的導航欄圖片路徑）

<template><view class="tabbar-container"><block><!-- 針對中間的導航欄 通過true來判斷控制類名和樣式 --><view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index"><view class="item-top"><image :src="currentItem == item.id ? item.selectIcon : item.icon"></image></view><!-- 通過三元判斷控制類名 達到控制選中和未選中的樣式 --><view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']"><text>{{ item.text }}</text></view></view></block></view> </template><script> // 組件的書寫符合easycom規范 無需引入直接使用 export default {props: {currentPage: {type: Number,default: 0}},data () {return {currentItem: 0,tabbarList: [{id: 0,path: '/pages/index/index',icon: '/static/template.png',selectIcon: '/static/templateHL.png',text: '首頁',centerItem: false},{id: 1,path: '/pages/midell/index',icon: '/static/api.png',selectIcon: '/static/apiHL.png',text: '中間',// 通過類名class控制樣式大小centerItem: true},{id: 2,path: '/pages/mine/index',icon: '/static/component.png',selectIcon: '/static/componentHL.png',text: '我的',centerItem: false}]}},mounted () {this.currentItem = this.currentPage// 隱藏原來的tabBar導航欄uni.hideTabBar()},methods: {changeItem (item) {let _this = this//_this.currentItem = item.id;uni.switchTab({url: item.path})}} }; </script> <style lang="less" scope> view {padding: 0;margin: 0;box-sizing: border-box; } .tabbar-container {position: fixed;bottom: 0rpx;left: 0rpx;width: 100%;height: 110rpx;box-shadow: 0 0 5px #999;display: flex;align-items: center;padding: 5rpx 0;color: #999999;/* 針對tabbar的統一處理 */.tabbar-item {width: 33.33%;height: 100rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;.item-top {width: 70rpx;height: 70rpx;padding: 10rpx;image {width: 100%;height: 100%;}}// 未被選中的導航欄字體.item-bottom {font-size: 28rpx;width: 100%;}// 被選中的導航欄字體.item-active {color: #f00;}}// 最中間的tabbar導航欄.center-item {display: block;position: relative;.item-top {flex-shrink: 0;width: 100rpx;height: 100rpx;position: absolute;top: -50rpx;left: calc(50% - 50rpx);border-radius: 50%;box-shadow: 0 0 5px #999;background-color: rgb(240, 63, 131);}.item-bottom {position: absolute;bottom: 5rpx;}.item-active {position: absolute;bottom: 5rpx;color: #1fff;}} } </style>

三、在每個導航欄頁面 引入公共組件

<midell-box :current-page="0"></midell-box>

注意current-page的值和公共組件的參數內 id對應

四、如果想要將中間的按鈕，點擊彈起二級菜單，可以修改公共組件midell-box,去掉點擊中間按鈕的path，監聽這個點擊事件后，打開彈框，在彈框內點擊對應的按鈕跳轉到對應的頁面。

下方的中間按鈕做了二級菜單彈框，但是點擊跳轉的頁面沒寫，故沒有讓其跳轉頁面，可以自己加。

點贊收藏吧！

總結

以上是生活随笔為你收集整理的uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。