ContextQMD
Back to Uni App

Custom Tab Bar

docs/component/custom-tab-bar.md

2.3.33.0 KB
Original Source
<!-- ## custom-tab-bar -->

::: sourceCode

custom-tab-bar

:::

自定义tabBar

兼容性

Web微信小程序AndroidiOSHarmonyOSHarmonyOS(Vapor)
4.24<a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a><a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a><a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a><a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a>-

属性

名称类型默认值兼容性描述
directionstring-Web: 4.0; 微信小程序: x; Android: x; iOS: x; HarmonyOS: -; HarmonyOS(Vapor): -选项的排列方向
show-iconboolean-Web: 4.0; 微信小程序: x; Android: x; iOS: x; HarmonyOS: -; HarmonyOS(Vapor): -是否显示icon
selectednumber-Web: 4.0; 微信小程序: x; Android: x; iOS: x; HarmonyOS: -; HarmonyOS(Vapor): -选中的tabBar选项索引值
@onTabItemTap(event: OnTabItemTapOption) => void-Web: 4.0; 微信小程序: x; Android: x; iOS: x; HarmonyOS: -; HarmonyOS(Vapor): -点击自定义 tabBar 触发事件，detail = {index, pagePath, text}

direction 的属性描述

合法值兼容性描述
horizontalWeb: x; 微信小程序: x; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -选项的排列方向水平
verticalWeb: x; 微信小程序: x; Android: x; iOS: x; HarmonyOS: x; HarmonyOS(Vapor): -选项的排列方向水平
<!-- UTSCOMJSON.custom-tab-bar.component_type -->

参见