Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
888H355
unidocs-zh
提交
cc619257
U
unidocs-zh
项目概览
888H355
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
cc619257
编写于
10月 27, 2022
作者:
Anne_LXM
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
uni.onTabBarMidButtonTap支持H5
上级
fff534ab
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
256 addition
and
256 deletion
+256
-256
docs/api/ui/tabbar.md
docs/api/ui/tabbar.md
+256
-256
未找到文件。
docs/api/ui/tabbar.md
浏览文件 @
cc619257
### uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√(钉钉小程序不支持)|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|平台差异|
|:-|:-|:-|:-|:-|:-|
|index|number||是|tabBar 的哪一项,从左边算起||
|text|String||否|tab 上的按钮文字||
|iconPath|String||否|图片路径,icon 大小限制为 40kb,建议尺寸为 81px
*
81px,当 position 为 top 时,此参数无效。微信小程序 2.7.0+、支付宝小程序支持网络图片,其他平台暂不支持网络图片||
|selectedIconPath|String||否|选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px
*
81px ,当 position 为 top 时,此参数无效||
|pagePath|String||否|页面绝对路径,必须在
[
pages
](
/collocation/pages?id=pages
)
中先定义,被替换掉的 pagePath 不会变成普通页面(仍然需要使用 uni.switchTab 跳转)|App(2.8.4+)、H5(2.8.4+)|
|visible|Boolean|true|否|该项是否显示|App(3.2.10+)、H5(3.2.10+)|
|iconfont|Object||否|字体图标,优先级高于 iconPath|App(3.4.4+)|
|success|Funtion||否|接口调用成功的回调函数||
|fail|Funtion||否|接口调用失败的回调函数||
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)||
**iconfont参数说明:**
|属性|类型|说明|
|:-|:-|:-|
|text|String|字库 Unicode 码|
|selectedText|String|选中后字库 Unicode 码|
|fontSize|String|字体图标字号(px)|
|color|String|字体图标颜色|
|selectedColor|String|字体图标选中颜色|
**示例代码**
```
js
uni
.
setTabBarItem
({
index
:
0
,
text
:
'
text
'
,
iconPath
:
'
/path/to/iconPath
'
,
selectedIconPath
:
'
/path/to/selectedIconPath
'
})
```
注意: 设置
`iconfont`
属性时,pages.json
`iconfontSrc`
需要指定字体文件,参考下面的配置
```
json
//
pages.json
{
"tabBar"
:
{
"iconfontSrc"
:
"static/iconfont.ttf"
,
"list"
:
[
{
"pagePath"
:
"pages/index/index"
,
"text"
:
"Tab1"
,
"iconfont"
:
{
"text"
:
"
\u
e102"
,
"selectedText"
:
"
\u
e103"
,
"fontSize"
:
"17px"
,
"color"
:
"#000000"
,
"selectedColor"
:
"#0000ff"
}
}
]
}
}
```
### uni.setTabBarStyle(OBJECT)
动态设置 tabBar 的整体样式
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|color|String||否|tab 上的文字默认颜色,HexColor|
|selectedColor|String||否|tab 上的文字选中时的颜色,HexColor|
|backgroundColor|String||否|tab 的背景色,HexColor|
|backgroundImage|String||否|图片背景。支持设置本地图片或创建线性渐变如,优先级高于 backgroundColor,仅 App 2.7.1+ 支持|
|backgroundRepeat|String||否|背景图平铺方式。repeat:背景图片在垂直方向和水平方向平铺;repeat-x:背景图片在水平方向平铺,垂直方向拉伸;repeat-y:背景图片在垂直方向平铺,水平方向拉伸;no-repeat:背景图片在垂直方向和水平方向都拉伸。 默认使用 no-repeat。仅 App 2.7.1+ 支持|
|borderStyle|String||否|tabBar上边框的颜色, 仅支持 black/white|
|success|Funtion||否|接口调用成功的回调函数|
|fail|Funtion||否|接口调用失败的回调函数|
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)|
**backgroundImage创建线性渐变说明**
`backgroundImage: linear-gradient(to top, #a80077, #66ff00);`
目前暂不支持 radial-gradient(径向渐变)。
目前只支持两种颜色的渐变,渐变方向如下:
-
to right:从左向右渐变
-
to left:从右向左渐变
-
to bottom:从上到下渐变
-
to top:从下到上渐变
-
to bottom right:从左上角到右下角
-
to top left:从右下角到左上角
**示例代码**
```
js
uni
.
setTabBarStyle
({
color
:
'
#FF0000
'
,
selectedColor
:
'
#00FF00
'
,
backgroundColor
:
'
#0000FF
'
,
borderStyle
:
'
white
'
})
```
### uni.hideTabBar(OBJECT)
隐藏 tabBar
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|animation|boolean|false|否|是否需要动画效果,仅微信小程序、支付宝小程序、百度小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持|
|success|Funtion||否|接口调用成功的回调函数|
|fail|Funtion||否|接口调用失败的回调函数|
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.showTabBar(OBJECT)
显示 tabBar
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|animation|boolean|false|否|是否需要动画效果,仅微信小程序、支付宝小程序、百度小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持|
|success|Funtion||否|接口调用成功的回调函数|
|fail|Funtion||否|接口调用失败的回调函数|
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.setTabBarBadge(OBJECT)
为 tabBar 某一项的右上角添加文本。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|text|String|是|显示的文本,不超过 3 个半角字符|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
**示例代码**
```
javascript
uni
.
setTabBarBadge
({
index
:
0
,
text
:
'
1
'
})
```
### uni.removeTabBarBadge(OBJECT)
移除 tabBar 某一项右上角的文本。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.showTabBarRedDot(OBJECT)
显示 tabBar 某一项的右上角的红点。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.hideTabBarRedDot(OBJECT)
隐藏 tabBar 某一项的右上角的红点。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.onTabBarMidButtonTap(CALLBACK)
监听中间按钮的点击事件
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(HBuilderX 2.3.4+)|
x|x|x|x|x|x|x|x|
**Tip**
-
tabbar是原生的,层级高于前端元素
-
[
uni-app插件市场
](
https://ext.dcloud.net.cn/search?q=%E5%BA%95%E9%83%A8%E5%9B%BE%E6%A0%87%E8%8F%9C%E5%8D%95
)
有封装的前端tabbar,但性能不如原生tabbar
-
如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
-
以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用,避免在 tabbar 未初始化前使用
### uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√(钉钉小程序不支持)|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|平台差异|
|:-|:-|:-|:-|:-|:-|
|index|number||是|tabBar 的哪一项,从左边算起||
|text|String||否|tab 上的按钮文字||
|iconPath|String||否|图片路径,icon 大小限制为 40kb,建议尺寸为 81px
*
81px,当 position 为 top 时,此参数无效。微信小程序 2.7.0+、支付宝小程序支持网络图片,其他平台暂不支持网络图片||
|selectedIconPath|String||否|选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px
*
81px ,当 position 为 top 时,此参数无效||
|pagePath|String||否|页面绝对路径,必须在
[
pages
](
/collocation/pages?id=pages
)
中先定义,被替换掉的 pagePath 不会变成普通页面(仍然需要使用 uni.switchTab 跳转)|App(2.8.4+)、H5(2.8.4+)|
|visible|Boolean|true|否|该项是否显示|App(3.2.10+)、H5(3.2.10+)|
|iconfont|Object||否|字体图标,优先级高于 iconPath|App(3.4.4+)|
|success|Funtion||否|接口调用成功的回调函数||
|fail|Funtion||否|接口调用失败的回调函数||
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)||
**iconfont参数说明:**
|属性|类型|说明|
|:-|:-|:-|
|text|String|字库 Unicode 码|
|selectedText|String|选中后字库 Unicode 码|
|fontSize|String|字体图标字号(px)|
|color|String|字体图标颜色|
|selectedColor|String|字体图标选中颜色|
**示例代码**
```
js
uni
.
setTabBarItem
({
index
:
0
,
text
:
'
text
'
,
iconPath
:
'
/path/to/iconPath
'
,
selectedIconPath
:
'
/path/to/selectedIconPath
'
})
```
注意: 设置
`iconfont`
属性时,pages.json
`iconfontSrc`
需要指定字体文件,参考下面的配置
```
json
//
pages.json
{
"tabBar"
:
{
"iconfontSrc"
:
"static/iconfont.ttf"
,
"list"
:
[
{
"pagePath"
:
"pages/index/index"
,
"text"
:
"Tab1"
,
"iconfont"
:
{
"text"
:
"
\u
e102"
,
"selectedText"
:
"
\u
e103"
,
"fontSize"
:
"17px"
,
"color"
:
"#000000"
,
"selectedColor"
:
"#0000ff"
}
}
]
}
}
```
### uni.setTabBarStyle(OBJECT)
动态设置 tabBar 的整体样式
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|color|String||否|tab 上的文字默认颜色,HexColor|
|selectedColor|String||否|tab 上的文字选中时的颜色,HexColor|
|backgroundColor|String||否|tab 的背景色,HexColor|
|backgroundImage|String||否|图片背景。支持设置本地图片或创建线性渐变如,优先级高于 backgroundColor,仅 App 2.7.1+ 支持|
|backgroundRepeat|String||否|背景图平铺方式。repeat:背景图片在垂直方向和水平方向平铺;repeat-x:背景图片在水平方向平铺,垂直方向拉伸;repeat-y:背景图片在垂直方向平铺,水平方向拉伸;no-repeat:背景图片在垂直方向和水平方向都拉伸。 默认使用 no-repeat。仅 App 2.7.1+ 支持|
|borderStyle|String||否|tabBar上边框的颜色, 仅支持 black/white|
|success|Funtion||否|接口调用成功的回调函数|
|fail|Funtion||否|接口调用失败的回调函数|
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)|
**backgroundImage创建线性渐变说明**
`backgroundImage: linear-gradient(to top, #a80077, #66ff00);`
目前暂不支持 radial-gradient(径向渐变)。
目前只支持两种颜色的渐变,渐变方向如下:
-
to right:从左向右渐变
-
to left:从右向左渐变
-
to bottom:从上到下渐变
-
to top:从下到上渐变
-
to bottom right:从左上角到右下角
-
to top left:从右下角到左上角
**示例代码**
```
js
uni
.
setTabBarStyle
({
color
:
'
#FF0000
'
,
selectedColor
:
'
#00FF00
'
,
backgroundColor
:
'
#0000FF
'
,
borderStyle
:
'
white
'
})
```
### uni.hideTabBar(OBJECT)
隐藏 tabBar
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|animation|boolean|false|否|是否需要动画效果,仅微信小程序、支付宝小程序、百度小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持|
|success|Funtion||否|接口调用成功的回调函数|
|fail|Funtion||否|接口调用失败的回调函数|
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.showTabBar(OBJECT)
显示 tabBar
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|属性|类型|默认值|必填|说明|
|:-|:-|:-|:-|:-|
|animation|boolean|false|否|是否需要动画效果,仅微信小程序、支付宝小程序、百度小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序、京东小程序支持|
|success|Funtion||否|接口调用成功的回调函数|
|fail|Funtion||否|接口调用失败的回调函数|
|complete|Funtion||否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.setTabBarBadge(OBJECT)
为 tabBar 某一项的右上角添加文本。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|text|String|是|显示的文本,不超过 3 个半角字符|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
**示例代码**
```
javascript
uni
.
setTabBarBadge
({
index
:
0
,
text
:
'
1
'
})
```
### uni.removeTabBarBadge(OBJECT)
移除 tabBar 某一项右上角的文本。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.showTabBarRedDot(OBJECT)
显示 tabBar 某一项的右上角的红点。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.hideTabBarRedDot(OBJECT)
隐藏 tabBar 某一项的右上角的红点。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|√|√|√|√|√|√|√|√|
**OBJECT参数说明:**
|参数|类型|必填|说明|
|:-|:-|:-|:-|
|index|Number|是|tabBar的哪一项,从左边算起|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.onTabBarMidButtonTap(CALLBACK)
监听中间按钮的点击事件
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|字节跳动小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(HBuilderX 2.3.4+)|
√|x|x|x|x|x|x|x|
**Tip**
-
tabbar是原生的,层级高于前端元素
-
[
uni-app插件市场
](
https://ext.dcloud.net.cn/search?q=%E5%BA%95%E9%83%A8%E5%9B%BE%E6%A0%87%E8%8F%9C%E5%8D%95
)
有封装的前端tabbar,但性能不如原生tabbar
-
如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
-
以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用,避免在 tabbar 未初始化前使用
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录