你会微信小程序自定义底部导航栏吗？

一、 在目录下创建文件如下图：

tabbar.js：

// pages/tabbar/tabbar.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      tabbar: {
        type: Object,
        value: {
           "backgroundColor": "#ffffff",
           "color": "#333",
           "selectedColor": "#fca89d",
           "borderStyle": "white",
            "list": [{
                 "pagePath": "/pages/index/index",
                 "text": "首页",
                 "iconPath": "http://192.168.2.61/wap/rm/images/in.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/ined.png"
               },
               {
                 "pagePath": "/pages/mry/mry",
                 "text": "美容院",
                 "iconPath": "http://192.168.2.61/wap/rm/images/mei.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/meied.png"
               },
               {
                 "pagePath": "/pages/shop/shop",
                 "text": "商城",
                 "iconPath": "http://192.168.2.61/wap/rm/images/shop.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/shoped.png"
               },
               {
                 "pagePath": "/pages/mine/mine",
                 "text": "我的",
                 "iconPath": "http://192.168.2.61/wap/rm/images/min.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/mined.png"
               }
             ],
         
        }
      }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

tabbar.json:

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

tabbar.wxml:

<!--pages/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.selectedColor}}" open-type="navigate">
            <view class='special-wrapper'>
                <image class="tabbar_icon" src="{{item.iconPath}}"></image>
            </view>
            <image class='special-text-wrapper'></image>
            <text class="txt">{{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 class="txt">{{item.text}}</text>
        </navigator>
    </block>
</view>

tabbar.wxss:

/* pages/tabbar/tabbar.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: 0 0 2px rgba(0, 0, 0, 0.1); }
.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; }
.tabbar_icon { width: 40rpx; height: 40rpx; margin:7rpx 0; }
.special-wrapper .tabbar_icon { width: 84rpx; height: 84rpx; }
.special-text-wrapper { width: 45rpx; height: 45rpx; }
.txt{font-size: 26rpx;}

二、然后需要在以下全局文件做下修改

app.js:

//app.js
App({
   onLaunch: 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: {
           systemInfo: null, //客户端设备信息
           userInfo: null,
           tabBar: {
             "backgroundColor": "#ffffff",
             "color": "#333",
             "selectedColor": "#fca89d",
             "borderStyle": "white",
             "list": [{
                 "pagePath": "/pages/index/index",
                 "text": "首页",
                 "iconPath": "http://192.168.2.61/wap/rm/images/in.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/ined.png"
               },
               {
                 "pagePath": "/pages/mry/mry",
                 "text": "美容院",
                 "iconPath": "http://192.168.2.61/wap/rm/images/mei.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/meied.png"
               },
               {
                 "pagePath": "/pages/shop/shop",
                 "text": "商城",
                 "iconPath": "http://192.168.2.61/wap/rm/images/shop.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/shoped.png"
               },
               {
                 "pagePath": "/pages/mine/mine",
                 "text": "我的",
                 "iconPath": "http://192.168.2.61/wap/rm/images/min.png",
                 "selectedIconPath": "http://192.168.2.61/wap/rm/images/mined.png"
               }
             ],
           }
         }
})

app.json:

 "tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#333",
    "selectedColor": "#fca89d",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/mry/mry"
      },
      {
        "pagePath": "pages/shop/shop"
      },
      {
        "pagePath": "pages/mine/mine"
      }
    ]
  }

三 、需要引入的tabbar,如index.wxml

index.wxml:

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

index.json:

{
    "usingComponents": {
      "tabbar": "/component/tabbar/tabbar"
    }
}

index.js：

const app = getApp()；
Page({
  data: {
    tabbar: {},
    },
  onLoad: function () {
     app.editTabbar();
  }
    })

最后，
效果图：