From 198df85529246e68d7cfde2ad4ab5e09dbbaef19 Mon Sep 17 00:00:00 2001 From: qiang Date: Mon, 30 Sep 2019 16:48:04 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=20tabBar=20=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/ui/tabbar.md | 11 ++++++++++- docs/collocation/pages.md | 29 +++++++++++++++++++++++++++-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/docs/api/ui/tabbar.md b/docs/api/ui/tabbar.md index 64a94855f..b7b2336ca 100644 --- a/docs/api/ui/tabbar.md +++ b/docs/api/ui/tabbar.md @@ -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 diff --git a/docs/collocation/pages.md b/docs/collocation/pages.md index 9d66c783a..4fc33a17d 100644 --- a/docs/collocation/pages.md +++ b/docs/collocation/pages.md @@ -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后不再存在。 -- GitLab