《微信小程序开发从入门到实战》学习六十六

6.5?界面API

6.5.2?导航栏菜单API

使用wx.getMenuButtonBoundingClientRect接口可以获取导航栏菜单按钮（右上角“胶囊”按钮）的布局位置信息。

坐标信息以屏幕左上角为原点。调用该接口不传入参数，返回值为Object类型，包含属性如下所示：

width，宽度，单位为px，下述单位同。

height，高度

top，上边界坐标

right，右边界.坐标

bottom，下边界坐标

left，左边界坐标

6.5.3?tab栏API

本小节的tab栏相关API都是自基础库1.9.0开始支持，低版本需做兼容处理。

1.接口wx.showTabBarRedDot

????????显示tabBar某一项的右上角的红点，传入参数是一个Object参，包含属性index,三回调函数。index为number类型，指定了在tabBar从左数第几个按钮上显示红点

2.接口wx.hideTabBarRedDot

????????隐藏tabBar某一项的右上角的红点，传入参数与wx.showTabBarRedDot同。

3.接口wx.setTabBarBadge

? ? ? ? 为tabBar某一项的右上角添加文本传入参数是一个Object参，支持的属性比wx.showTabBarRedDot多一个text,其内容为显示文本，超过四个字符显示为省略号。

4.接口wx.removeTabBarBadge

? ? ? ? 移除tabBar某一项的右上角的文本，传入参与wx.showTabBarRedDot同。

5.接口wx.hideTabBar

? ? ? ? 隐藏TabBar，使用wx.showTabBar可重新显示被隐藏TabBar。两接口入参属性支持三回调函数和animation，表示隐藏或显示tabBar是否需要动画效果，animation默认值为false

6.接口wx.setTabBarStyle

? ? ? ? 动态设置tabBar的整体样式，示例代码如下：

?wx.setTabBarStyle({

??????color:?'#FF0000',

??????selectedColor:?'#00FF00',

??????backgroundColor:?'#0000FF',

??????borderStyle:?'white'

????})

7.接口wx.setTabBarItem

动态设置TabBar某一项的内容。自基础库2.7.0起图片支持临时文件和网络文件。示例代码如下：

???wx.setTabBarItem({

?????index:?0,

?????text:?'text0',

?????iconPath:?'/imgs/icon1.png',

?????selectedIconPath:?'/imgs/icon2.png'

???})