Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yangkaifeng
uni-app
提交
16ad524f
U
uni-app
项目概览
yangkaifeng
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
3
Star
1
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,发现更多精彩内容 >>
未验证
提交
16ad524f
编写于
10月 19, 2019
作者:
W
wanganxp
提交者:
GitHub
10月 19, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update pages.md
上级
f49e39ab
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
6 addition
and
4 deletion
+6
-4
docs/collocation/pages.md
docs/collocation/pages.md
+6
-4
未找到文件。
docs/collocation/pages.md
浏览文件 @
16ad524f
...
...
@@ -693,23 +693,25 @@ h5 平台下拉刷新动画,只有 circle 类型。
|属性|类型|必填|默认值|描述|
|:-|:-|:-|:-|:-|
|width|String|否|80px|中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度|
|height|String|否|50px|中间按钮的高度,可以大于 tabBar 高度|
|height|String|否|50px|中间按钮的高度,可以大于 tabBar 高度
,达到中间凸起的效果
|
|text|String|否||中间按钮的文字|
|iconPath|String|否||中间按钮的图片路径|
|iconWidth|String|否|24px||图片宽度(高度等比例缩放)|
|backgroundImage|String|否||中间按钮的背景图片路径|
midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap,详见
[
https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
](
https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
)
#### **tabbar常见问题** @tips-tabbar
-
tabbar 的默认高度,在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px,与H5端统一。开发者也可以自行设定高度,调回56px。
[
详见
](
https://uniapp.dcloud.io/frame?id=%e5%9b%ba%e5%ae%9a%e5%80%bc
)
-
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
)
。
-
代码跳转到tabbar页面,api只能使用
[
uni.switchTab
](
https://uniapp.dcloud.io/api/router?id=switchtab
)
,不能使用uni.navigateTo、uni.redirectTo;使用navigator组件跳转时必须设置
[
open-type="switchTab"
](
https://uniapp.dcloud.io/component/navigator
)
-
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模板例子,
[
参考
](
https://ext.dcloud.net.cn/plugin?id=98
)
。可跨端,但+号不凸起。如需中间凸起,配置tabbar的midButton。
-
App端若使用nvue,自定义tabbar,没有性能体验问题。
-
纯nvue项目(manifest里renderer为native),目前使用pages.json里的tabbar反而影响性能,建议使用前端自己实现单页面的tabbar。后续会解决这个bug。
-
Android App上弹出键盘顶起tabbar的问题。升级到HBuilderX 2.2后不再存在。
-
原生的tabbar
只有一个且在首页。二级页如需的tab,前端自己
实现。
-
原生的tabbar
有且只有一个且在首页。二级页如需的tab,前端自行
实现。
-
如果是需要先登录、后进入tab页面,不需要把登陆页设为首页,首页仍然是tabbar页,可参考HBuilderX新建uni-app项目时的登陆模板
-
前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbar。App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩,可参考这个
[
底部原生图标分享菜单例子
](
https://ext.dcloud.net.cn/plugin?id=69
)
-
微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。
[
详见
](
https://developers.weixin.qq.com/community/develop/doc/0002e6e6bf0d602d8c783e10756400
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录