未验证 提交 16ad524f 编写于 作者: W wanganxp 提交者: GitHub

Update pages.md

上级 f49e39ab
......@@ -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.
先完成此消息的编辑!
想要评论请 注册