先上图看效果：
步骤：
1、在文件根目录下创建一个文件夹：custom-tab-bar并分别创建 (js，json,wxml,wxss）类型文件
2、在pages.json中设置tabbar中的custom为true(true自定义，false默认系统)
3、index.js代码如下：
Component({data: {selected: 0,//当前选中的tab下标color: "#1E1E1E",selectedColor: "#646464",//tabbar选中字体颜色list: [{"pagePath": "/pages/index/index","iconPath": "/static/common/tabbar-img/find-unselected.png","selectedIconPath": "/static/common/tabbar-img/find-selected.png","text": "发现"},{"pagePath": "/pages/card-list/index","iconPath": "/static/common/tabbar-img/cupon2.png","selectedIconPath": "/static/common/tabbar-img/cupon2.png","text": '',diyClass: "diy"},{"pagePath": "/pages/mine/index","iconPath": "/static/common/tabbar-img/mine-unselected.png","selectedIconPath": "/static/common/tabbar-img/mine-selected.png","text": "我的"}],//tabbar循环数据集},attached() {},methods: {switchTab(e) {const data = e.currentTarget.dataset;const url = data.paththis.setData({selected: data.index })wx.switchTab({url})}},})
4、index.json中代码如下：
{"component": true}
5、index.html代码如下：
<view class="tab-bar"><view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="{{item.diyClass}}" mode="aspectFit"/><view style="color: {{selected === index ? selectedColor : color}}" class="{{item.diyClass}}">{{item.text}}</view></view></view>
6、index.wxss代码：
/*重新样式*/.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;display: flex;box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05);box-sizing: content-box;}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);}.tab-bar-item {flex: auto;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;background: #fff;height: 120rpx;}.tab-bar-item.diy {margin-top: 0!important;background: transparent;position: relative;flex: inherit;width: 134rpx;}.tab-bar-item image {width: 48rpx;height: 48rpx;overflow: initial;}.tab-bar-item view {font-size: 24rpx;}.tab-bar-item image.diy {position: absolute;width: 134rpx;height: 140rpx;bottom: 25.6%;z-index: 100;}.tab-bar-item view.diy {margin-top: 90rpx;background: #fff;width: 100%;height: 100%;padding-top: 58rpx;z-index: 99;}
7、在main.js中添加兼容小程序自定义tabbar
Vue.mixin({methods:{setTabBarIndex(index) {if (typeof this.$mp.page.getTabBar === 'function' &&this.$mp.page.getTabBar()) {this.$mp.page.getTabBar().setData({selected: index})}}}})
8、在项目中tabBar 页面,onShow生命周期中设置：
this.setTabBarIndex(1);
注意this.setTabBarIndex(1);中的1是指当前tabbar页面位于index.js中list集合的下标
比如pages/index/index.vue 中执行的是this.setTabBarIndex(0);
好了，再次运行一下，基本可以兼容ios和安卓的所有机型了。
最后贴一下凸起透明效果的切图
只切红框部分，圆的上半部分和周围要是透明色，只有底部是白色，这个跟UI沟通就可以，直接能切下来;
如果觉得《微信小程序底部tabbar自定义 实现凸起+透明底部效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
