底部导航栏 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