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

本文主要是介绍《微信小程序开发从入门到实战》学习六十六，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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'

   })

这篇关于《微信小程序开发从入门到实战》学习六十六的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---