微信小程序底部tabbar自定义 实现凸起+透明底部效果

先上图看效果：

步骤：
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.path
			this.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沟通就可以，直接能切下来;