Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
fa508930
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
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看板
提交
fa508930
编写于
4月 02, 2022
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'master' of
https://github.com/dcloudio/unidocs-zh
into vuepress
上级
6c9265c5
08f52016
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
59 addition
and
1 deletion
+59
-1
docs/api/ui/tabbar.md
docs/api/ui/tabbar.md
+36
-0
docs/collocation/pages.md
docs/collocation/pages.md
+23
-1
未找到文件。
docs/api/ui/tabbar.md
浏览文件 @
fa508930
...
...
@@ -18,10 +18,22 @@
|selectedIconPath|String||否|选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px
*
81px ,当 position 为 top 时,此参数无效||
|pagePath|String||否|页面绝对路径,必须在
[
pages
](
/collocation/pages?id=pages
)
中先定义,被替换掉的 pagePath 不会变成普通页面(仍然需要使用 uni.swichTab 跳转)|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
...
...
@@ -33,6 +45,30 @@ uni.setTabBarItem({
})
```
注意: 设置
`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 的整体样式
...
...
docs/collocation/pages.md
浏览文件 @
fa508930
...
...
@@ -68,11 +68,19 @@
"
fontSize
"
:
"
10px
"
,
"
iconWidth
"
:
"
24px
"
,
"
spacing
"
:
"
3px
"
,
"
iconfontSrc
"
:
"
static/iconfont.ttf
"
,
// app tabbar 字体.ttf文件路径 app 3.4.4+
"
list
"
:
[{
"
pagePath
"
:
"
pages/component/index
"
,
"
iconPath
"
:
"
static/image/icon_component.png
"
,
"
selectedIconPath
"
:
"
static/image/icon_component_HL.png
"
,
"
text
"
:
"
组件
"
"
text
"
:
"
组件
"
,
"
iconfont
"
:
{
// 优先级高于 iconPath,该属性依赖 tabbar 根节点的 iconfontSrc
"
text
"
:
"
\
ue102
"
,
"
selectedText
"
:
"
\
ue103
"
,
"
fontSize
"
:
"
17px
"
,
"
color
"
:
"
#000000
"
,
"
selectedColor
"
:
"
#0000ff
"
}
},
{
"
pagePath
"
:
"
pages/API/index
"
,
"
iconPath
"
:
"
static/image/icon_API.png
"
,
...
...
@@ -964,6 +972,8 @@ h5 平台下拉刷新动画,只有 circle 类型。
|iconPath|String|否|图片路径,icon 大小限制为40kb,建议尺寸为 81px
*
81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标||
|selectedIconPath|String|否|选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px
*
81px ,当 position 为 top 时,此参数无效||
|visible|Boolean|否|该项是否显示,默认显示|App (3.2.10+)、H5 (3.2.10)+|
|iconfont|Object|否|字体图标,优先级高于 iconPath|App(3.4.4+)|
**midButton 属性说明**
...
...
@@ -975,9 +985,21 @@ h5 平台下拉刷新动画,只有 circle 类型。
|iconPath|String|否||中间按钮的图片路径|
|iconWidth|String|否|24px|图片宽度(高度等比例缩放)|
|backgroundImage|String|否||中间按钮的背景图片路径|
|iconfont|Object|否||字体图标,优先级高于 iconPath|App(3.4.4+)|
midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap,详见
[
https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
](
https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
)
**iconfont参数说明:**
|属性|类型|说明|
|:-|:-|:-|
|text|String|字库 Unicode 码|
|selectedText|String|选中后字库 Unicode 码|
|fontSize|String|字体图标字号(px)|
|color|String|字体图标颜色|
|selectedColor|String|字体图标选中颜色|
#### **tabbar常见问题** @tips-tabbar
-
tabbar 的 js api 见
[
接口-界面-tabbar
](
https://uniapp.dcloud.io/api/ui/tabbar
)
,可实现动态显示隐藏(如弹出层无法覆盖tabbar)、内容修改(如国际化)、item加角标等功能。hello uni-app中也有示例。
-
tabbar 的 item 点击事件见
[
页面生命周期的onTabItemTap
](
https://uniapp.dcloud.io/tutorial/page.html#lifecycle
)
。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录