• 底部导航栏 Tabbar
    • 使用方法
    • 基本案例
    • 设置尺寸和背景色
    • 只有icon的TabBar
    • 顶部带半圆的TabBar
    • 带背景图片的TabBar
    • 底部菜单栏属性(TabBar Attributes)
    • 底部菜单栏事件 (TabBar Events)
    • list属性(List Attributes)

    底部导航栏 Tabbar

    通过 tabBar 配置项可以指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

    自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。本组件提供封装好的接口方便使用,同时满足了一些微信原生tabBar完成不了的特殊样式。

    底部导航栏 Tabbar - 图1

    注意事项

    • 因为微信当前的自定义tabbar模式,存在一些体验和开发上的不友好,所以这种用法,暂时不支持。等待微信完善后,会考虑加上。

    使用方法

    常规的使用方法与Lin UI其他的组件一样,这里不做赘述,但是需要耐心阅读本文,参照下面的底部菜单栏属性列表去配置。

    基本案例

    自定义tabbar的参数设置和微信原生的tabbar参数基本一致,可以参考文末的底部菜单栏属性部分来学习。当我们在list里写入了对应页面的参数后,就能生成的tabbar了。

    底部导航栏 Tabbar - 图2

    设置尺寸和背景色

    lin-ui的自定义tabbar可以通过backgroundColoriconSize设置背景色和icon的大小。

    底部导航栏 Tabbar - 图3

    只有icon的TabBar

    TabBar的当前tab项可以只设置图片的路径iconPathiconSize,这样我们可以做到更定制化的效果。

    底部导航栏 Tabbar - 图4

    顶部带半圆的TabBar

    lin-ui的自定义tabbar的list可以生成不同的tab项,每一项里都有对应的属性来设置更具特色的tab项,当设置 stylecircle时。当前tab项的顶部出现半圆。

    底部导航栏 Tabbar - 图5

    带背景图片的TabBar

    当一些重要节日到来,需要我们在tabbar上面做一些更绚丽的效果时,我们可以通过backgroundImg来设置自定义TabBar的背景图片,更加充满节日气息。

    注意事项

    • 1,backgroundImg的权重大于backgroundColor,当设置背景图片后,背景色便不生效了。
    • 2,当我们使用背景图片时,最好不要再设置单个tab的顶部为半圆。

    底部导航栏 Tabbar - 图6

    底部菜单栏属性(TabBar Attributes)

    参数说明类型可选值默认值
    show控制tabBar组件的显示和隐藏Booleantrue/falsetrue
    isSwitchTab控制tabBar跳转使用的方法是否是wx.switchTab,false代表使用wx.navigate跳转Booleantrue/falsetrue
    selectedtabBar组件的选中项的下标Numbernull
    colortab 上的文字默认颜色,仅支持十六进制颜色String#7A7E83
    fontSizetab 上的文字的大小Number24
    selectedColortab 上的文字选中时的颜色,仅支持十六进制颜色String主题色
    backgroundColortab 的背景色,仅支持十六进制颜色String#fff
    backgroundImgtab 的背景图片,仅支持网络图片和base64String
    listtab 的列表,详见 list 属性说明,最少2个、最多5个 tabArray

    底部菜单栏事件 (TabBar Events)

    事件名称说明返回值备注
    bind:lintap点击切换的时候触发detail:当前下标-

    list属性(List Attributes)

    参数说明类型可选值默认值
    pagePath页面路径Stringnull
    texttab 上按钮文字String
    iconSize图片尺寸,默认是6464,单位是rpxString64
    iconPath图片路径,建议尺寸为 81px 81pxString
    selectedIconPath选中时的图片路径,建议尺寸为 81px * 81pxString
    style当设置成‘circle’时,显示当前tabBar的border-bottom 为半圆String
    redDot显示 tabBar 某一项的右上角的红点Booleantrue/falsefalse
    badge为 tabBar 某一项的右上角添加文本String