微信小程序底部tabbar自定义带弧度效果完整版案例

这是运行的效果：

• 新建components组件文件夹，里面新建tabbarComponent文件夹，结构如下：
  

tabbar.js代码：

// tabBarComponent/tabBar.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabbar: {
      type: Object,
      value: {
        "backgroundColor": "#ffffff",
        "color": "#979795",
        "selectedColor": "#1c1c1b",
        "list": [
          {
            "pagePath": "/pages/index/index",
            "iconPath": "icon/icon_index.png",
            "selectedIconPath": "icon/icon_indexIn.png",
            "text": "首页"
          },
          {
            "pagePath": "/pages/usercenter/usercenter",
            "iconPath": "icon/icon_my.png",
            "selectedIconPath": "icon/icon_myIn.png",
            "text": "我的"
          }
        ]
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isIphoneX: app.globalData.isIphoneX? true : false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    choseNav:function(e){
      console.log(e)
      let sindex = e.currentTarget.dataset.sindex
      switch(sindex){
        case 0:
          wx.switchTab({
            url: '/pages/index/index'
          })
          break;
        case 1:
          wx.switchTab({
            url: '/pages/usercenter/usercenter'
          })
          break;
      }
    }
  }
})

tabbar.json代码：

{
  "component": true,
  "usingComponents": {}
}

tabbar.wxml代码：

<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
  <block wx:for="{{tabbar.list}}" wx:key="item" wx:for-index="sindex">
    <view bindtap="choseNav" class="tabbar_nav" data-sindex="{{sindex}}" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}">
      <view class='special-wrapper {{item.selected?"pos-a":""}}'>
        <image wx:if="{{item.selected}}" class="tabbar_icon" src="{{item.selectedIconPath}}"></image>
        <image wx:else class="tabbar_icon" src="{{item.iconPath}}"></image>
      </view>
      <image class="circle" wx:if="{{item.selected}}" src="../../assets/icons/circle_shadow.png"></image>
      <view class="placeholder" wx:if="{{item.selected}}"></view>
      <view class="nav_txt {{item.selected?'checkColor':''}}">{{item.text}}</view>
    </view>
  </block>
</view>

tabbar.css代码：

.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    box-shadow: 0px -5px 8px 0px rgba(26, 117, 87, 0.05);
}
.tabbar_box.iphoneX-height{
  padding-bottom: 66rpx;
}
.tabbar_nav{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  height: 100%;
  position: relative;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.special-wrapper{
  width: 50rpx;
  height: 50rpx;
  font-size: 0;
}
.special-wrapper.pos-a{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -30rpx;
  width: 92rpx;
  height: 92rpx;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.circle{
  position: absolute;
  width: 130rpx;
  height: 46rpx;
  top: -46rpx;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 9;
}

.special-wrapper .tabbar_icon{
    width: 50rpx;
    height: 50rpx;
}
.special-wrapper.pos-a .tabbar_icon{
  width: 80rpx;
  height: 80rpx;
}
.placeholder{
  height: 50rpx;
  height: 50rpx;
}
.nav_txt{
  color: #9EA3B9;
  font-size: 22rpx;
}
.checkColor{
  color: #20CA8F;
}

app.js代码：

 //初始化小程序
 onLaunch: function () {
    //隐藏系统tabbar
    wx.hideTabBar();
 },
 onShow: function(){
    //隐藏系统tabbar
    wx.hideTabBar();
 },
 // 自定义导航
 editTabbar: function () {
    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
    });
 },
 //定义配置参数
 globalData: {
    isIphoneX: false,
    tabBar: {
      "backgroundColor": "#ffffff",
      "color": "#979795",
      "selectedColor": "#1c1c1b",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "iconPath": "icon/icon_index.png",
          "selectedIconPath": "icon/icon_indexIn.png",
          "text": "首页"
        },
        {
          "pagePath": "/pages/usercenter/usercenter",
          "iconPath": "icon/icon_my.png",
          "selectedIconPath": "icon/icon_myIn.png",
          "text": "我的"
        }
      ]
    }
 }

app.json代码：

"tabBar": {
    "custom": true,
    "color": "#aaaaaa",
    "selectedColor": "#FE5E78",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "assets/icons/tabIcon/icon1.png",
            "selectedIconPath": "assets/icons/tabIcon/icon1-s.png"
        },
        {
            "pagePath": "pages/usercenter/usercenter",
            "text": "我的",
            "iconPath": "assets/icons/tabIcon/icon4.png",
            "selectedIconPath": "assets/icons/tabIcon/icon4-s.png"
        }
    ]
},

在页面中使用例子代码（index为例）：
index.wxml代码：

// 引入组件
<tabbar tabbar="{{tabbar}}"></tabbar>

index.js代码：

var app = getApp()
Page({
	data: {
	    //tabbar
	    tabbar: {},
	},
	onLoad: function (options) {
    	app.editTabbar();
	},
})

index.json代码：

{
  "navigationStyle": "custom",
  "usingComponents": {
    "tabbar": "../../components/tabbarComponent/tabbar"
  }
}

以为就是自定义底部导航带弧度效果的完整代码！