小程序自定义tabbar(类似闲鱼底部凸起)

先上效果图

因为多处需要使用这个tabbar，所以我们决定把他封装成一个组件，
希望可以帮到你哦~
组件代码
wxml

<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
  <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
    <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.color}}"  bindtap="shareTherelease" data-url="{{item.pagePath}}" open-type="navigate">
      <view class='special-wrapper'>
        <image class="tabbar_icon" src="{{item.iconPath}}"></image>
      </view>
      <image class='special-text-wrapper'></image>
      <text>{{item.text}}</text>
    </navigator>
    <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </navigator>
  </block>
</view>

wxss

.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 98rpx;
    /* box-shadow: darkgrey 0px 0px 30px 5px ; */
}
.tabbar_box.iphoneX-height{
    padding-bottom: 66rpx;
}
.middle-wrapper{
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{
  bottom: 66rpx;
}
.tabbar_nav{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    height: 100%;
    position: relative;
}
.tabbar_icon{
    width: 50rpx;
    height: 50rpx;
}
.special-wrapper{
  position: absolute;
  /* left: 77rpx; */
  top: -52rpx;
  width: 113rpx;
  height: 113rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}
.special-wrapper .tabbar_icon{
  width: 88rpx;
  height: 88rpx;
  padding-top: 7rpx;

}
.special-text-wrapper{
  width: 56rpx;
  height: 56rpx;
}

js

// tabBarComponent/tabBar.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabbar: {
      type: Object,
      value: {
        "backgroundColor": "#ffffff",
        "color": "#979795",
        "selectedColor": "#1c1c1b",
        "list": [
          {
            "pagePath": "pages/spaceHomePage/spaceHomePage",
            "text": "觅书",
            "iconPath": "/img/icon-findbook.png",
            "selectedIconPath": "/img/icon-findbook1.png"
          },
          {
            "pagePath": "pages/found/found",
            "text": "发现",
            "iconPath": "img/Restaurant1.png",
            "selectedIconPath": "img/Restaurant.png"
          },
          {
            "pagePath": "/pages/shareTherelease/shareTherelease",
            "text": "共享/发布",
            "iconPath": "pages/img/Restaurant1.png",
            "selectedIconPath": "pages/img/Restaurant.png"
          },
          {
            "pagePath": "pages/publicWelfare/publicWelfare",
            "text": "公益",
            "iconPath": "pages/img/friend1.png",
            "selectedIconPath": "pages/img/friend.png"
          },
          {
            "pagePath": "pages/mine/mine",
            "text": "我的",
            "iconPath": "pages/img/mine1.png",
            "selectedIconPath": "pages/img/mine.png"
          }
        ]
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // isIphoneX: app.globalData.systemInfo.model == "iPhone X" ? true : false,
  },
  /**
   * 组件的方法列表
   */
  // methods: {
  //   shareTherelease:{
  //     wx.navigateTo({
  //       url: '',
  //     })
  //   }
  // },
  methods: {
    shareTherelease(e) {
      console.log(e.currentTarget.dataset.url);
      // wx.navigateTo({
      //   url: e.currentTarget.dataset.url
      // })
    }
  }

})

因为用到了switchTab所以你得app.json里面配置上你需要switchTab的页面的目录，然后再app.js里面因隐藏掉原生的tabbar

//隐藏系统tabbar
    wx.hideTabBar()

在项目中的app.js里面加上如下代码，是配置你自定义的tabbar

 globalData: {
    userInfo: null,
    tabBar: {
      "backgroundColor": "#ffffff",
      "color": "#333333",
      "selectedColor": "#26C55E",
      "list": [
        {
          "pagePath": "/pages/spaceHomePage/spaceHomePage",
          "text": "觅书",
          "iconPath": "img/icon-findbook.png",
          "selectedIconPath": "img/icon-findbook1.png"
        },
        {
          "pagePath": "/pages/found/found",
          "text": "发现",
          "iconPath": "img/icon-found.png",
          "selectedIconPath": "img/icon-found1.png"
        },
        {
          "pagePath": "/pages/shareTherelease/shareTherelease",
          "isSpecial": true,
          "text": "共享/发布",
          "iconPath": "img/icon_release.png",
          "selectedIconPath": "img/icon_release.png",
        },
        {
          "pagePath": "/pages/publicWelfare/publicWelfare",
          "text": "公益",
          "iconPath": "img/icon-publicwelfare.png",
          "selectedIconPath": "img/icon-publicwelfare1.png"
        },
        {
          "pagePath": "/pages/mine/mine",
          "text": "我的",
          "iconPath": "img/icon-mine.png",
          "selectedIconPath": "img/icon-mine1.png"
        }
      ]
    }
  },
  editTabbar: function () {
    //隐藏系统tabbar
    wx.hideTabBar()
    let tabbar = this.globalData.tabBar;
    let currentPages = getCurrentPages();
    let _this = currentPages[currentPages.length - 1];
    let pagePath = _this.route;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for (let i in tabbar.list) {
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },

此时组件所有的东西都已经准备好了，
你只需要在你需要调用这个tab的页面调用这个自定义组件就好了，
就是和平常的调用组件的写法一模一样
在你需要调用的wxml这样写

<tabbar tabbar="{{tabbar}}"></tabbar>

然后再对应页面的js中声明

const app = getApp();
onLoad: function(options) {
    app.editTabbar();
  },

``
调用app.js里面的`editTabbar方法，然后你就可以看到在你所需要的界面出现了这个自定义组件啦。别的页面需要引用也是如上方法，