我自己寫的自定義的tabbar效果圖
廢話少說咱們直接上代碼，一步一步來

第一步：

找到根目錄下的 pages.json 文件，在 tabBar 中把 custom 設置為 true，默認值是 false。list 中設置自定義的相關信息，

pagePath： 頁面路徑；
iconPath： 點擊前顯示的圖片；
selectedIconPath： 點擊后顯示的圖片；
text： 底部導航的名稱。

第二步

在根目錄下創建 components 文件夾用來存放自定義tabBar組件，小伙伴們可以自定義文件夾和文件的名稱。記得命名要規范哦！！！

第三步

咱也不截圖了，看了那么多的文章全他媽截圖，咱直接上代碼方便有需要的小伙伴使用！！！！

<template><view class="tabbar-container flex items-center"><!-- isRound是中間凸出樣式的標志，用來判斷當前子級是否是凸出樣式的 --><view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(index, item)"><!-- 不是凸出的子級 --><template v-if="!item.isRound"><view class="item-top flex justify-center flex-col"><u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width":height="item.height"></u-image></view><view class="item-bottom" :class="{'active': active === index}"><text>{{ item.text }}</text></view></template><!-- 凸出的子級 --><template v-else><view class="flex flex-col justify-center items-center center-round"><view class="flex flex-col justify-center items-center"><u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width":height="item.height"></u-image><text :class="{'round-active': active === index}">{{ item.text }}</text></view></view></template></view></view>
</template>
<script>export default {name: 'Tabbar',props: {tabbarIndex: {type: Number,default: 0}},data() {return {// tabbar列表，配置自定義用到的屬性字段tabbarList: [{pagePath: "/pages/homePage/index",iconPath: "/static/images/tabbar/index.png",selectedIconPath: "/static/images/tabbar/index-selected.png",text: "首頁",width: '45rpx',height: '41rpx',isRound: false},{pagePath: "/pages/information/index",iconPath: "/static/images/tabbar/data.png",selectedIconPath: "/static/images/tabbar/data-selected.png",text: "數據",width: '44rpx',height: '43rpx',isRound: false},{pagePath: "/pages/aiRecommend/index",iconPath: "/static/images/tabbar/ai-recommend.png",selectedIconPath: "/static/images/tabbar/ai-recommend.png",text: "智能推薦",width: '120rpx',height: '120rpx',isRound: true},{pagePath: "/pages/vip/index",iconPath: "/static/images/tabbar/vip.png",selectedIconPath: "/static/images/tabbar/vip-selected.png",text: "會員",width: '39rpx',height: '37rpx',isRound: false},{pagePath: "/pages/center/index",iconPath: "/static/images/tabbar/center.png",selectedIconPath: "/static/images/tabbar/center-selected.png",text: "我的",width: '40rpx',height: '41rpx',isRound: false},],active: 0,isRound: false,}},mounted() {this.active = this.tabbarIndex},methods: {tabbarChange(index, item) {this.$emit('updateTabbar', index)uni.switchTab({url: item.pagePath});}}}
</script><style lang="scss" scoped>.tabbar-container {width: 100%;height: 132rpx;position: fixed;bottom: 0;.square {width: 100%;height: 130rpx;background: #FFFFFF;display: flex;flex-direction: column;align-items: center;justify-content: center;.round-active {color: #207BDB;}}.square .item-top {width: 45rpx;height: 45rpx;}.is-square {width: 100%;height: 130rpx;background: #FFFFFF;display: flex;flex-direction: column;align-items: center;justify-content: center;.round-active {color: #207BDB;}}.center-round {width: 203rpx;height: 130rpx;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAAlCAYAAADstR3BAAADx0lEQVR4nO3deajnUxjH8dc1Y2zDzFjGvkZkKcofpNGgTCl/oGRfyto0iJJQypa1KJT9H7KUJYSsDRFlGqQUyi4kDVe2y1wdnqmZ3HSv+1vOOd/zrl/3d3/3j/s8p+/n9zzPOc85Z2R8fFxjIGyHvbEXdsC28dkcrIeNMAM/4s8waDbWxk/4HSvwDT7HZ3gfb+O9+HujjzSx9IcR7IGDsRAHYpM+/r8xvIOleAmvhMAaPaSJpXekqHAAjsCRETWGxW94EY/hcXxXwfgOnSaW6bMbTsGJ2CpD+1LUeRr3xs+xDGwqkiaW/8eMiCDnYEFBdn+Le3ArvsjAnqJoYpkaqeA+M0QyzDRruoxFinYdlhXsx0BpYpkcacZqCc7rc6E+DFJqdgXeqMyvntPE8t/MDpFciLk5G9oDnsXFWF68J32iiWVi1oqi/UpsmaOBfWIlHsJFsY7TWI0mln+zfxTA++Rm2AD5BVfjxnjfeTSxrMH8eDiOj0XFBp/EZMaTbSz+STe6zkikXKl15IQmlDVIbTlP4OGOpaMT0vXIkh6Gu3BIBrbkTupLuyDWaTpJVyNLih5n4N0mlEmTZgPvxlNdjTJdjCzzo/XjsAxsKZXvcToe7ZLTXYssi6I7twllemyMR3A71i/ZkanQFbHMxDV4BltkYE8tpFT2LezZBWe7kIZtjQcKa3gsjZ9DOPfX7GTtkWVBtG80ofSXlIrdh9tiZ2eV1CyWVIC+gM0ysKUrnI3nKmw2/ZsaxZL2mtyEOzArA3u6RtpG/WZsq66K2mqWeXgQh2ZgS9cZxXGxLlMFNUWWnWJPRhNKHmwY+//Pr8WhWiJLmrp8vk0LZ8u10fZfNDWIZVe82gr57LkKl5bsQOlp2FF4rQmlCC6JdZg5pTpQamRJ+fDNODUDWxpT41OcFAcBFkWJkWVRdAs3oZTJ9ng5vuw2KMmDkiLLprgBJ2dgS6M3fIzF0bOXPSVEllmx6ejDJpTq2DGOYkpi2T1353KOLGmD1jG4HDtnYE+jv/wRXReX5Xo2c65iOShOF9kvA1sagyVduXF91DSjOY19TmJZB8fi3LjHpNFtVsSRVLfg6xxGIgexpP0mp+GstgLfmIBV5zLfGXfPrBzWIA1LLNvgcBwdF/20I5kak+GrOJYpief1qHMGxqDEkmY99o1NWAvjqrhGYzr8EOs1S0M4ae3t136OaBLLvNV+H52iWufGavqqVzrIYPO4LzEJZJdocqz9UO3G8EnP7Qfx+iju3fwyZtbSc51qoDR5kN6nm9EmS3quZ2LdvwC4r+EYTWev0AAAAABJRU5ErkJggg==');background-position: center top;background-size: 100% 37rpx;background-repeat: no-repeat;position: absolute;margin-top: -72rpx;text {font-weight: 500;font-size: 20rpx;color: #555B66;position: absolute;top: 117rpx;}}.item-bottom {font-weight: 500;font-size: 20rpx;color: #555B66;margin-top: 14rpx;}.active {color: #207BDB;}}
</style>

注意：小程序背景圖無法使用本地圖片，要么轉成base64，要么把圖片存到服務器上，然后調用接口把圖片路徑返回。推薦第二種方法。

我寫的有點繁瑣，中間凸起的樣式應該為一整塊，可是ui只給了頂部的白色圖片導致寫的代碼有點多。不過大體的思路差不多都是這樣，小伙伴們也可以參考其他博主寫的文章的思路去編寫自定義組件。

這是我用到的圖片，小伙伴們可以下載下來配合代碼進行使用。

第四步

在需要的頁面中引用自定義組件

<template><Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
</template>
<script>import Tabbar from "@/components/tabbar/tabbar.vue"components: { Tabbar },data() {return {tabbarIndex: 4,}},methods: {updateTabbar(e) {this.tabbarIndex = e},}
</script>

有需求的小伙伴們可以試試，我寫的并不是很完美但是大體的思路是這樣的，小伙伴們可以根據自己項目的需求進行改動。此文章可作為參考使用，希望能幫到有需求的小伙伴！！！！

如果有用的話就點擊收藏起來吧！！！