美文网首页
《微信小程序开发从入门到实战》学习六十六

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

作者: 阿宅白石 | 来源:发表于2023-12-28 14:34 被阅读0次

    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'

       })

    相关文章

      网友评论

          本文标题:《微信小程序开发从入门到实战》学习六十六

          本文链接:https://www.haomeiwen.com/subject/qgadndtx.html