前言
在開發小程序的時候，一般的小程序用官方自帶的菜單欄就夠了，但一但稍微復雜的小程序可能因為產品經理的一句“頁面太多了得加個菜單”，就可能要對菜單欄進行增、刪、改的操作，這個時候自帶的就滿足不了需求了，可以使用官方提供的自定義菜單欄。
但官方提供的自定義菜單欄有個特點，就是菜單欄的頁面必須是 ，假如你是在項目做到一半的時候有要對菜單欄進行增、刪、改的需求，用官方提供自定義菜單欄就需要把page頁面改成 ，那就需要很多時間修改頁面邏輯，會很麻煩。
所以這個時候，我們就可以采用官方自帶的菜單欄和自己封裝的菜單欄組合使用，這樣能節省修改邏輯的時間，還能享受自帶菜單的良好交互。
思路
我們可以用小程序自帶的菜單和我們自己封裝的自定義菜單組件使用，具體邏輯是這樣的：
成品效果
具體實現
先在 app.json 頁面配置好官方自帶的菜單欄
"tabBar": {
"custom": false,
"color": "#999999",
"selectedColor": "#00C3B3",
"borderStyle": "black",
"backgroundColor": "#f8f8f8",
"list": [
{
"selectedIconPath": "/assets/img/homeActive.png",
"iconPath": "/assets/img/home.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"selectedIconPath": "/assets/img/mallActive.png",
"iconPath": "/assets/img/mall.png",
"pagePath": "pages/index/index",
"text": "商城"
},
{
"selectedIconPath": "/assets/img/myActive.png",
"iconPath": "/assets/img/my.png",
"pagePath": "pages/index/index",
"text": "我的"
}
]
},然后封裝一個自定義的菜單欄組件
目錄結構：
+ components
+ shoping-tabbar
- index.js
- index.json
- index.wxml
- index.wxssindex.js 文件代碼
// components/shoping-tabbar/index.js
const app = getApp();
Component({
/**
* 組件的屬性列表
*/
properties: {
selected: {
type: Number,
default: 0
}
},
/**
* 組件的初始數據
*/
data: {
selectedIndex: 0,
color: "#999999",
selectedColor: "#00C3B3",
list: [
{
"selectedIconPath": "/assets/img/mallActive.png",
"iconPath": "/assets/img/mall.png",
"pagePath": "/pages/index/index",
"text": "商城"
},
{
"selectedIconPath": "/assets/img/cartActive.png",
"iconPath": "/assets/img/cart.png",
"pagePath": "/pages/index/index",
"text": "購物車"
},
{
"selectedIconPath": "/assets/img/orderActive.png",
"iconPath": "/assets/img/order.png",
"pagePath": "/pages/index/index",
"text": "訂單"
}
]
},
attached: function () {
this.setData({
selectedIndex: this.properties.selected
})
},
/**
* 組件的方法列表
*/
methods: {
switchTab(e) {
let data = e.currentTarget.dataset
let url = data.path
wx.redirectTo({
url,
fail: function (err) {
wx.switchTab({
url
})
},
success: () => {
this.setData({
selectedIndex: data.index
})
}
})
wx.hideTabBar({
animation: false,
success: () => {
app.globalData.tabbar_type = 2
}
})
}
},
})
index.wxml 文件
{{item.text}} 然后在需要自定義菜單組件的頁面引入
為菜單的序號win10開始菜單程序怎么自定義，比如成品效果動態圖中的自定義菜單分別有商城、購物車、訂單三個頁面，序號分別為1，2win10開始菜單程序怎么自定義，3。
然后在自定義菜單欄頁面（商城、購物車、訂單）的 () 方法里分別初始化是否顯示菜單的變量
this.setData({
tabbar_type: app.globalData.tabbar_type
})最后一步很關鍵，通過上面的成品效果動態圖可以看到，從官方自帶的菜單欄跳我們封裝的自定義菜單欄的頁面，是通過 商城 這個頁面中轉的，這個頁面比較特別，它既是官方自帶的菜單中的一個頁面，又用了我們自己封裝的自定義菜單欄組件。
我們可以通過官方提供的 () 來監聽，當展示官方菜單欄且點擊這個tab頁的時候就隱藏官方的菜單欄，展示自己封裝的自定義菜單欄。
/**
* 當前是 tab 頁時，點擊 tab 時觸發
* @param {*} item
*/
onTabItemTap(item) {
wx.hideTabBar({
animation: false,
success: () => {
this.setData({
tabbar_type: 2
})
app.globalData.tabbar_type = 2
}
})
},然后在這個中轉頁商城頁的返回事件這樣處理：隱藏自己封裝的菜單欄，展示官方的菜單欄
navToBack() {
let pages = getCurrentPages();
// 獲取前一個頁面的路徑
let prevpageHtml = pages[0].__displayReporter.showReferpagepath;
wx.showTabBar({
animation: true,
success: () => {
wx.switchTab({
url: `/${prevpageHtml.substring(0, prevpageHtml.lastIndexOf('.html'))}`,
})
this.setData({
tabbar_type: 1
})
app.globalData.tabbar_type = 1;
}
})
},總結
用官方自帶的菜單欄和自己封裝的自定義菜單欄組合使用的好處就是既能享受官方自帶菜單欄的友好交互，有能把中途因需求原因改菜單欄需將 頁 從 page 改成 的時間省下。這樣的騷操作在這種情況還是很可行的，哈哈。
話說時間過得真快呀，再過35分鐘就是下半年的第一天了，祝大家都有個好的下半場開端吧！
寫在最后
我是 ，目前暫時是一枚前端搬磚工程師。
文中如有錯誤，歡迎在評論區指正，如果這篇文章幫到了你，歡迎點贊和關注呀