方法一：通过app.json配置底部菜单（常用）
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象
"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) },
