关于如何自定义tabbar，可以参考官方文档(写的比较详细)
自定义 tabBar | 微信开放文档developers.
源码如下（参考网上代码，按自己理解做了一些优化）仅供参考
index.js
Component({data: {color: "#515151",selectedColor: "#DAA520",backgroundColor: "#ffffff",list: [{pagePath: "/pages/index/index",text: "流水",iconPath: "/img/income.png",selectedIconPath: "/img/income-select.png"},{pagePath: "/pages/chart/chart",text: "图表",iconPath: "/img/chart.png",selectedIconPath: "/img/chart-select.png"},{pagePath: "/pages/record/record",bulge:true,iconPath: "/img/post.png",selectedIconPath: "/img/post-select.png"},{pagePath: "/pages/message/message",text: "消息",iconPath: "/img/message.png",selectedIconPath: "/img/message-select.png"},{pagePath: "/pages/home/home",text: " 我家",iconPath: "/img/home.png",selectedIconPath: "/img/home-select.png"}]},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url}) }}})
index.json
{"component": true}
index.wxml
<!--miniprogram/custom-tab-bar/index.wxml--><view class="tab-bar"><view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><view wx:if="item.bulge" class="tab-bar-bulge"></view><image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image><view wx:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view></view></view>
index.wxss
.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 48px;background: #FFF;display: flex;line-height: 1.2;padding-bottom: env(safe-area-inset-bottom);border-top: 1px solid #e6e6e6;}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}.tab-bar-item image {width: 27px;height: 27px;}.bulge {background-color: #FFF;}.bulge .tab-bar-bulge {position: absolute;z-index: -1;top: -10px;width: 80px;height: 80px;border-radius: 50%;border-top: 1px solid #e6e6e6;background-color: #FFF;}.bulge image{position: absolute;width: 45px;height: 45px;top: -12px;padding-top: 10px;}.tab-bar-item view {font-size: 10px;}
注意：自定义的tabBar需要在页面js里实现
onShow: function () {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 1})}},
欢迎体验
如有问题欢迎评论区交流
如果觉得《tabbar角标 小程序_关于小程序底部凸起实现（自定义tabbar）》对你有帮助，请点赞、收藏，并留下你的观点哦！
