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

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

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:

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:

index.json:
{
“usingComponents”: {
“tabbar”: “/component/tabbar/tabbar”
}
}

index.js：

const app = getApp()；
Page({
data: {
tabbar: {},
},
onLoad: function () {
app.editTabbar();
}
})
最后，
效果图：

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路