当前位置：首页 > news >正文

uniapp小程序自定义中间凸起样式底部tabbar

news 2025/6/28 10:08:29

我自己写的自定义的tabbar效果图自定义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>