微信小程序为开发者提供了官方tabBar组件,添加方法很简单.在app.json文件中加入tabbar配置代码,示例如下:
"tabBar": {
"color": "#888888",
"selectedColor": "#ff8231",
"borderStyle": "White",
// 设置tabbar中的item
"list": [
{
"pagePath": "页面的路径",
"text": "tabbar下item的名称",
"iconPath": "图片路径",
"selectedIconPath": "选中时的图片路径"
},
// 以下为具体示例
{
"pagePath": "pages/mine/me/me",
"text": "我",
"iconPath": "/pages/coupon/resources/ic_tabbar_mine_unselected.png",
"selectedIconPath": "/pages/coupon/resources/ic_tabbar_mine_selected.png"
}
]
}
关于tabbar点击的事件的监听,附上官方文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html?search-key=onTabItemTap
有需求设计这方面,发现onTabItemTap并不好用,首先,点击事件只能在被点击item的路径页面才能监听到,其次第一次点击时(切换tab时)并不会触发,需要再点击一次才会触发.所以并不是onTabItemTap不能使用,只是监听的位置不对,或者点击次数不够.
官方文档对于如何操作tabBar也有很详细的文档:
https://developers.weixin.qq.com/miniprogram/dev/api/ui-tabbar.html#wxsettabbarbadgeobject
如果觉得onTabItemTap不好用,对于点击tabbar有明确需求可以考虑自定义tabbar.
