小程序自定义菜单Navbar

前言：采用模板template格式进行自定义所需要的菜单，以及可以根据不同的需求在同一个小程序中显示不一样的菜单navbar

效果对比图：

效果对比图

1.定义Navbar格式（在根目录下新增一个.wxml文件）

2.对navbar可进行自定义样式（因为小程序全部页面都会用到，所以可在app.wxss中定义navbar样式）

.tabBar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 120rpx;
    border-top: 1rpx solid #d7d7d7; 
}

.tabBar_nav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    height: 100%;
}

.tabBar_icon{
    width: 50rpx;
    height:50rpx;
}

3.对于navbar菜单所显示的只以及相关图标信息值的配置可在全局app.js中进行初始化定义

 tabBar: {
    selectedColor: "#0592E4",
    list: [
      {
        pagePath: "/pages/List/List",
        text: "分润详情",
        iconPath: "/pages/image/Detail01.png",
        selectedIconPath: "/pages/image/Detail02.png",
        selected: true
      },
      {
        pagePath: "/pages/Spread/Spread",
        text: "推广管理",
        iconPath: "/pages/image/tuig01.png",
        selectedIconPath: "/pages/image/tuig02.png",
        selected: false
      },
      {
        pagePath: "/pages/Settlement/Settlement",
        text: "结算管理",
        iconPath: "/pages/image/Settl01.png",
        selectedIconPath: "/pages/image/Settl02.png",
        selected: false
      },
      {
        pagePath: "/pages/Account/Account",
        text: "账户信息",
        iconPath: "/pages/image/me21.png",
        selectedIconPath: "/pages/image/me22.png",
        selected: false
      }
    ],
    position: "bottom"
    }

对于navbar相关数据初始化的定义就基本 已经完成，接下来就是要引用模板