custom-tab-bar

Instructions

自定义tabBar组件。

在小程序和App端，为提升性能，在 pages.json 里配置固定的原生tabBar。但在H5端，这一设计并不会提升性能。

同时，H5端尤其是PC宽屏，对tabBar的位置和样式有更灵活的需求，tabBar作为一级导航，更多的时候是在PC网页顶部而不是底部。

Syntax

使用 <custom-tab-bar />（或 <custom-tab-bar></custom-tab-bar>，当需要包裹子节点时）。
遇到平台差异时，建议使用条件编译（#ifdef / #endif）显式处理。

Properties

属性名	类型	默认值	说明
direction	String	horizontal	选项的排列方向可选值：horizontal，vertical
show-icon	Boolean	false	是否显示icon
selected	Number	0	选中的tabBar选项索引值

Events

事件名	类型	默认值	说明
onTabItemTap	EventHandle		点击事件，参数为Object，具体见下表

Platform Compatibility

See official docs for platform support table: https://doc.dcloud.net.cn/uni-app-x/component/custom-tab-bar.html

Examples

Example (Example 1)

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中的 top-window 查看 -->
<template>
    <view>
        <custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
    </view>
</template>

Example (Example 2)

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中的 top-window 查看 -->
<template>
    <view>
        <custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
    </view>
</template>

Reference: Official Documentation

1.9 KiB Raw Blame History Unescape Escape