方法一：通過app.json配置底部菜單（常用）

?小程序根目錄下的?app.json?文件用來對微信小程序進行全局配置。文件內容為一個 JSON 對象全局配置 | 微信開放文檔微信開發者平臺文檔https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

  "tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#F7F7F7","list": [{"pagePath": "pages/home/home","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "首頁"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "內頁1"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "內頁2"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "我的"}]},

方法二：通過小程序擴展組件mp-tabbar創建底部菜單

app.json根節點加入

 "useExtendedLib": {"weui": true}, 

?需要使用組件的頁面json文件里面加入

  "usingComponents": {"mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar"}

??需要使用組件的頁面html文件里面加入

<mp-tabbar style="position:fixed;width:100%;bottom:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>

??需要使用組件的頁面js文件里面加入?

  data: {list: [{text: '欄目1',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",badge: '8'},{text: '欄目2',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",badge: 'new'},{text: '欄目3',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",dot: true},{text: '欄目4',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",}]},tabChange(e:any) {console.log('tab change', e)},

總結

以上是生活随笔為你收集整理的【微信小程序】之如何创建底部菜单？tabBar、mp-tabbar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。