Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
20岁爱吃必胜客
uni-app
提交
198df855
U
uni-app
项目概览
20岁爱吃必胜客
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
198df855
编写于
9月 30, 2019
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: 更新 tabBar 文档
上级
f22f865a
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
37 addition
and
3 deletion
+37
-3
docs/api/ui/tabbar.md
docs/api/ui/tabbar.md
+10
-1
docs/collocation/pages.md
docs/collocation/pages.md
+27
-2
未找到文件。
docs/api/ui/tabbar.md
浏览文件 @
198df855
...
...
@@ -184,8 +184,17 @@ uni.setTabBarBadge({
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|
### uni.onTabBarMidButtonTap(CALLBACK)
监听中间按钮的点击事件
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√(HBuilderX 2.3.4+)|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项目、选择 底部选项卡 模板
\ No newline at end of file
-
HBuilderX 2.3.4 版本以下如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板
\ No newline at end of file
docs/collocation/pages.md
浏览文件 @
198df855
...
...
@@ -55,6 +55,9 @@
"
selectedColor
"
:
"
#3cc51f
"
,
"
borderStyle
"
:
"
black
"
,
"
backgroundColor
"
:
"
#ffffff
"
,
"
height
"
:
"
56px
"
,
"
fontSize
"
:
"
12px
"
,
"
iconWidth
"
:
"
24px
"
,
"
list
"
:
[{
"
pagePath
"
:
"
pages/component/index
"
,
"
iconPath
"
:
"
static/image/icon_component.png
"
,
...
...
@@ -65,7 +68,15 @@
"
iconPath
"
:
"
static/image/icon_API.png
"
,
"
selectedIconPath
"
:
"
static/image/icon_API_HL.png
"
,
"
text
"
:
"
接口
"
}]
}],
"
midButton
"
:
{
"
width
"
:
"
80px
"
,
"
height
"
:
"
56px
"
,
"
text
"
:
"
文字
"
,
"
iconPath
"
:
"
static/image/midButton_iconPath.png
"
,
"
iconWidth
"
:
"
24px
"
,
"
backgroundImage
"
:
"
static/image/midButton_backgroundImage.png
"
}
}
}
```
...
...
@@ -663,6 +674,10 @@ h5 平台下拉刷新动画,只有 circle 类型。
|borderStyle|String|否|black|tabbar 上边框的颜色,仅支持 black/white||
|list|Array|是||tab 的列表,详见 list 属性说明,最少2个、最多5个 tab||
|position|String|否|bottom|可选值 bottom、top|top 值仅微信小程序支持|
|fontSize|String|否|12px|文字默认大小|App(HBuilderX 2.3.4+)|
|iconWidth|String|否|24px|图标默认宽度(高度等比例缩放)|App(HBuilderX 2.3.4+)|
|height|String|否|56px|tabBar 默认高度|App(HBuilderX 2.3.4+)|
|midButton|Object|否||中间按钮 仅在 list 项为偶数时有效|App(HBuilderX 2.3.4+)|
其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:
...
...
@@ -673,6 +688,17 @@ h5 平台下拉刷新动画,只有 circle 类型。
|iconPath|String|否|图片路径,icon 大小限制为40kb,建议尺寸为 81px
*
81px,当 postion 为 top 时,此参数无效,不支持网络图片,不支持字体图标|
|selectedIconPath|String|否|选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px
*
81px ,当 postion 为 top 时,此参数无效|
**midButton 属性说明**
|属性|类型|必填|默认值|描述|
|:-|:-|:-|:-|:-|
|width|String|否|80px|中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度|
|height|String|否|56px|中间按钮的高度,可以大于 tabBar 高度|
|text|String|否||中间按钮的文字|
|iconPath|String|否||中间按钮的图片路径|
|iconWidth|String|否|24px||图片宽度(高度等比例缩放)|
|backgroundImage|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/frame?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
)
。
...
...
@@ -680,7 +706,6 @@ h5 平台下拉刷新动画,只有 circle 类型。
-
tabbar 在H5端是div模拟的,属于前端屏幕窗口的一部分,如果要使用bottom居底定位方式,应该使用css变量
`--window-bottom`
,比如悬浮在tabbar上方10px的按钮,样式如下
`bottom: calc(var(--window-bottom) + 10px)`
-
tabbar 的默认高度,在不同平台不一样。
[
详见
](
https://uniapp.dcloud.io/frame?id=%e5%9b%ba%e5%ae%9a%e5%80%bc
)
-
中间带+号的tabbar模板例子,
[
参考
](
https://ext.dcloud.net.cn/plugin?id=98
)
。可跨端,但+号不凸起。
-
如需 tabbar 中间凸起,可自定义tabbar,插件市场有例子,如colorUI等。但注意前端tabbar的性能不如原生tabbar,如果是多页方式,底部tabbar会在切换时闪执行转场动画,如果是单页方式,承载复杂页面内容会有性能问题。
[
插件市场
](
https://ext.dcloud.net.cn/search?q=tabbar
)
搜索tabbar有不少类似例子。
-
App端若使用nvue,自定义tabbar,没有性能体验问题。
-
纯nvue项目(manifest里renderer为native),目前使用pages.json里的tabbar反而影响性能,建议使用前端自己实现单页面的tabbar。后续会解决这个bug。
-
Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录