微信小程序自定义tabbar、中间凸起、uniapp注意避坑

Component({
          
   
  data: {
          
   
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#1976d2",
    list: [{
          
   
		"pagePath": "/pages/home/index",
		"iconPath": "../static/home.png",
		"selectedIconPath": "../static/home_1.png",
		"text": "首页",
		"number":
    },
	{
          
   
		"pagePath": "/pages/server/index",
		"iconPath": "../static/server.png",
		"selectedIconPath": "../static/server_1.png",
		"text": "服务",
		"number":
    },
	{
          
   
        "pagePath": "/pages/circle/index",
        "iconPath": "../static/dynamic.png",
        "selectedIconPath": "../static/dynamic_1.png",
        "text": "村友圈",
		"number":
      },
	  {
          
   
	    "pagePath": "/pages/chat/index",
	    "iconPath": "../static/msg.png",
	    "selectedIconPath": "../static/msg_1.png",
	    "text": "消息",
		"number":
	  },
      
      {
          
   
        "pagePath": "/pages/userCentral/index",
        "iconPath": "../static/my.png",
        "selectedIconPath": "../static/my_1.png",
        "text": "我的",
		"number":
      }],
	  background:../static/tabbar-bg.png,
	  centerImg:../static/dynamic.png
  },
  attached() {
          
   
		if(this.data.selected == 2){
          
   
			this.setData({
          
   
				centerImg : ../static/dynamic_1.png
			})
		}else{
          
   
			this.setData({
          
   
				centerImg : ../static/dynamic.png
			})
		}
		let numi = list[3].number 
		this.setData({
          
   
			[numi] : 12
		})
  },
  
  methods: {
          
   　// 切换 tab 事件
      switchTab(e) {
          
   
        let that = this
        const path = e.currentTarget.dataset.path
        // 跳转页面
        wx.switchTab({
          
   
           url: path
        })
      }
    }
})

2、index.json

{
          
   
  "component": true
}

3、index.wxml

<view class="tab-bar">
  <view wx:for="{
          
   {list}}" wx:key="index" class="tab-bar-item" data-path="{
          
   {item.pagePath}}" data-index="{
          
   {index}}" bindtap="switchTab" >
    <view class="center_part" >
      <view class="center_part_code" wx:if="{
          
   {index == 2}}">
        <image class=" center-has-noimg" src="{
          
   {centerImg}}" ></image>
      </view>
      <image class=" center-has-image" src="{
          
   {selected === index ? item.selectedIconPath : item.iconPath}}" wx:else></image>
	</view>
    <view style="color: {
          
   {selected === index ? selectedColor : color}}" class="cover-text">{
          
   {
          
   item.text}}</view>
	<view class="number" wx-if="{
          
   {item.number != }}">{
          
   {
          
   item.number}}</view>
  </view>
</view>

4、index.wxss

.tab-bar {
          
   
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 99;
  padding-top: 17rpx;
  background-image: url(https://ns51.eaia.cn/group1/M00/01/E4/wKgKymLgpdWARzR-AAANbZWJ5GM302.png);
  background-size: 100vw;
}
  
.tab-bar-item {
          
   
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab-bar-item cover-image {
          
   
  width: 27px;
  height: 27px;
}
  
.tab-bar-item .cover-text {
          
   
  font-size: 10px;
}
.txt{
          
   
  color: #aaaaaa;
}
.fontWeight{
          
   
  font-weight: bold;
}
.bg_rec{
          
   
  background: #ffd324;
  width: 80rpx;
  min-height: auto;
  height: 20rpx;
  margin-top: -28rpx;
  vertical-align: text-bottom;
  border-radius: 0;
  z-index: -10;
}
.center_img{
          
   
  width: 100rpx;
  height: 100rpx;
  transform: translate(-50%);
  left: 50%;
  bottom:0;
}
.center-has-noimg{
          
   
  width: 100%;
  height: 100%;
}
.center-has-image{
          
   
  width: 38rpx;
  height: 38rpx; 
}
.center_part_code{
          
   
  padding: 10rpx;
  box-shadow: 0 0 0 #000;
  /* width: 100rpx;
  height: 100rpx; */
  position: absolute;
  top: -26px;
  z-index: 10;
  width: 120rpx;
  height: 120rpx;
  transform: translate(-50%);
  left: 50%;
}
.tab-bar-item:nth-child(3)>.cover-text{
          
   
  position: absolute;
  bottom: 4rpx;
}
.number{
          
   
	position: absolute;
	font-size: 24rpx;
	min-width: 40rpx;
	min-height: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	padding: 4rpx;
	line-height: 24rpx;
	background-color: #fd6334;
	border-radius: 50%;
	transform: translate(26rpx,-40rpx);
}

在tabbar对应页面中需要在onShow()里自动更新tabbar的selected,这里小程序的原生写法和uniapp写法不一样，注意避坑 在原生写法中：

if (typeof this.getTabBar === function &&
     this.getTabBar()) {
          
   
     this.getTabBar().setData({
          
   
         selected: 0 
     })
}

在uniapp中：

if (typeof this.$mp.page.getTabBar === function && this.$mp.page.getTabBar()) {
          
   
	this.$mp.page.getTabBar().setData({
          
   
		selected: 0
	})
}