前言：采用模板template格式进行自定义所需要的菜单，以及可以根据不同的需求在同一个小程序中显示不一样的菜单navbar
效果对比图：
 |
 |
1.定义Navbar格式（在根目录下新增一个.wxml文件）
<template name="navbar">
<view class="tabBar_box" style="background-color:{{tabBar.backgroundColor}}; {{tabBar.position == 'top' ? 'top:0' : 'bottom:0'}}；position:fixed;bottom:0;">
<block wx:for="{{tabBar.list}}" wx:for-item="item" wx:key="nav">
<navigator class="tabBar_nav" url="{{item.pagePath}}" style="width:{{1/tabBar.list.length*100}}%; " open-type="redirect" bindtap="changeTabBar">
<image class="tabBar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text style="color:{{item.selected ? tabBar.selectedColor : tabBar.color}}">{{item.text}}</text>
</navigator>
</block>
</view>
</template>
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相关数据初始化的定义就基本 已经完成，接下来就是要引用模板
<import src="../../navbar.wxml" />
<template is="navbar" data="{{tabBar}}"/>
【对于模板的引用有一点注意事项，
在定义模板时，<template name="navbar"></template>,
引用时 <template is="navbar" data="{{tabBar}}"/>
具体相关文档参考 官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html】
在每一个navbar所指向的页面中，都需要定义赋值，否则该页面初始化时无法读取到数据
Page({
/**
* 页面的初始数据
*/
data: {
tabBar: app.globalData.tabBar,
},
});
采用template模板定义菜单已基本完成；
但还有一些动态操作功能需要实现
其一：点击菜单进行页面跳转时，该图标切换为selectIconpath中路径的图标，selected：false也未更改
解决办法：需要在点击文字图标时增加一个bindtap事件
changeTabBar
/**
* navbar菜单导航切换事件
*/
changeTabBar: function () {
var that = this;
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];
var _pagePath = _curPage.__route__;
if (_pagePath.indexOf('/') != 0) {
_pagePath = '/' + _pagePath;
}
var tabBar = app.globalData.tabBar;
console.log(tabBar);
for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].selected = false;
if (tabBar.list[i].pagePath == _pagePath) {
tabBar.list[i].selected = true;//根据页面地址设置当前页面状态
}
}
that.setData({
tabBar: tabBar
});
},
【注意if之后一定要重新赋值setData，因为页面加载是会读取page-data中的数据，
虽然在if条件中进行判断当前页面以及进行修改selected值，但是并未进行赋值，所以会出现selecticonPath无效的情况】
其二：使用模板template自定义菜单是因为比较灵活，如果采用微信小程序自身定义，无法进行灵活，或者可应用与菜单只有一种情况下。我才用自定义template定义菜单是因为我会出现两种不一样的菜单导航
解决办法：可提前判断当前登录人的身份并且进行选择相应的菜单导航值，或者删除之后重新定义赋值
/**
* 根据登录人身份进行显示navbar
* 1 团队经销商;0-个人经销商
*/
navbar: function () {
var that = this;
var type = app.globalData.userInfo.ChannelType
var tabBar = app.globalData.tabBar;
if (type == 0) {
console.log("个人");
for (var i = 0; i < tabBar.list.length; i++) {
if (tabBar.list[i].text == "结算管理") {
tabBar.list.splice(i, 1);//根据页面地址设置当前页面状态
console.log(tabBar.list[i].text == "结算管理");
that.setData({
tabBar: app.globalData.tabBar
});
}
}
that.setData({
tabBar: app.globalData.tabBar
});
}
},
【因为登录之后就需要显示相应的菜单，所以需要在页面加载时去执行该方法】
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
that.navbar();
},
自定义菜单功能基本已实现，
【如有不正确的地方或者不恰当的地方还请指出，谢谢！】