mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
59 lines
1.9 KiB
Markdown
59 lines
1.9 KiB
Markdown
# 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)
|
||
|
||
```vue
|
||
<!-- 本示例未包含完整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)
|
||
|
||
```html
|
||
<!-- 本示例未包含完整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](https://doc.dcloud.net.cn/uni-app-x/component/custom-tab-bar.html)
|