Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
86230f95
U
uni-app
项目概览
DCloud
/
uni-app
4 个月 前同步成功
通知
725
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
86230f95
编写于
11月 13, 2020
作者:
inkwalk
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
doc: add custom-tab-bar.md
上级
25cb60e4
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
43 addition
and
0 deletion
+43
-0
docs/component/custom-tab-bar.md
docs/component/custom-tab-bar.md
+43
-0
未找到文件。
docs/component/custom-tab-bar.md
0 → 100644
浏览文件 @
86230f95
#### custom-tab-bar
自定义tabbar。
**平台兼容性**
__仅 H5 支持__
,HBuilderX 2.9.9 + 。
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|direction|String|none|tabBar选项的排列方向 可选值:horizontal,vertical,默认:horizontal|
|show-icon|Boolean|false|是否显示icon|
|selected|Number||选中的tabBar选项索引值|
|onTabItemTap|EventHandle||点击事件,参数为Object,具体见下表|
``onTabItemTap``
参数说明:
|属性|类型|说明|
|---|---|---|
|index|String|被点击tabItem的序号,从0开始|
|pagePath|String|被点击tabItem的页面路径|
|text|String|被点击tabItem的按钮文字|
**示例**
[
查看演示
](
httEventHandleps://hellouniapp.dcloud.net.cn/pages/component/custom-tab-bar/custom-tab-bar
)
以下为示例代码,来自于
[
hello uni-app项目
](
https://github.com/dcloudio/hello-uniapp
)
的适配 pc 版,window/top-window.vue 文件,推荐使用HBuilderX 2.9.9 + 体验,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。
```
html
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<custom-tab-bar
direction=
"horizontal"
:show-icon=
"false"
:selected=
"selected"
@
onTabItemTap=
"onTabItemTap"
/>
</view>
</template>
```
![
uniapp
](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/5dc930c0-2580-11eb-8a36-ebb87efcf8c0.png
)
**Tips**
-
该组件目前不支持borderStyle配置
-
该组件支持所有tabBar相关API
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录