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'
})
网友评论