前言：採用模板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();
},
自定義菜單功能基本已實現，
【如有不正確的地方或者不恰當的地方還請指出，謝謝！】