微信小程序获取tabbar的高度_微信小程序开发中如何设置tabbar中的样式

首先给出效果图：

图1 效果图

1. 什么是tabbar

tabbar就是微信小程序下方的导航栏，如图所示：

图2 微信小程序中的tabbar

如何显示导航栏tabbar，我们已经在前面的文章中作了介绍(《自定义微信小程序标题栏和导航栏》)，今天我们将介绍，如何设置tabbar导航栏的样式。

在微信小程序开发过程中，我们或多或少的会遇到这样的需求：在tabbar中显示红点、在右上角显示文字、隐藏tabbar等等需求。下面，我们就对tabbar的一些样式进行分析。

2. 微信小程序开发中如何显示和隐藏tabbar右上角的红点

图3 显示右上角红点

小程序开发过程中，当接受新的消息时，需要给出右上角的红点的提示，只需要调用函数wx.showTabBarRedDot(Object object)，其中，参数Object object可以填写以下几项：

关于隐藏tabbar右上角的红点，只需要调用函数wx.hideTabBarRedDot(Object object)，其中，参数Object object可以填写的内容和showTabBarRedDot一样。

3. 微信小程序开发中显示和隐藏tabbar

在微信小程序开发过程中，我们有时候需要界面全屏显示，比如调用地图API时，这样才能给用户更好的人机体验，这是后就需要动态的显示和隐藏微信小程序中的tabbar导航栏，关于显示tabbar，我们只需要调用函数：wx.showTabBar(Object object)，其中，参数Object object可以填写以下几项：

关于隐藏tabbar，只需要调用函数wx.hideTabBar(Object object)，其中，参数Object object可以填写的内容和showTabBar一样。

4. 微信小程序开发动态设置 tabBar 的整体样式或某一项内容

在微信小程序开发过程中，我们有时候需要设置更为个性的tabbar，或者由于主题颜色的需求，我们需要保持与主题颜色一样，就需要调整tabbar的整体样式，我们只需要调用函数：wx.setTabBarStyle(Object object)，其中，参数Object object可以填写以下几项：

有时候，更具项目需求，我们还需要动态的设置，tabbar中某一项内容，这时只需要调用函数：wx.setTabBarItem(Object object)，其中，参数Object object可以填写以下几项：

5.微信小程序开发中为 tabBar 某一项右上角添加或删除文本

用过微信我们知道，当有好友发送消息过来时，tabbar右上角会有消息文本提示，如图所示：

图4 添加或删除文本

这时只需要调用函数：wx.setTabBarBadge(Object object)，其中，参数Object object可以填写以下几项：

对于删除文本，只需要调用函数：wx.removeTabBarBadge(Object object)，其中，参数Object object可以填写以下几项：

6.关键代码

图5-1 .js代码

图5-2 .wxml代码

总结

本文介绍了微信小程序开发过程中，导航栏tabbar的样式的设置