1tab-bar
tabbar里面定义方式为:
"pages":[ "pages/state/state" ], "tabBar": { "custom": true, "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/state/state", "iconPath": "images/icon_tabbar.png", "selectedIconPath": "images/icon_tabbar.png", "text": "统计图" } ]
说明(app.json文件):
1.首先需要在pages中定义
2.在tabBar中定义页面路径、默认图标、选中图标等,但注意,其中的路径不能重复。
3.在2已经配置好的情况下,在项目的根路径下,建立文件夹:custom-tab-bar,其中包涵4个index组件,并在index.js中定义:
Component({ data: { selected: 0, color: "#7A7E83", selectedColor: "#3cc51f", "list": [ { "pagePath": "/pages/state/state", "iconPath": "/images/icon_tabbar.png", "selectedIconPath": "/images/icon_tabbar.png", "text": "统计图" } ] }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path wx.switchTab({url}) this.setData({ selected: data.index }) } } })
内容和app.json中tabbar中List一样。这样即可。至于为什么须需要定义custom-tab-bar,搜索一圈下来发现,这是微信官方的规定,只能按照此规定执行了。