From 08f52016a855857629b8b7bf763fa013b5b3e057 Mon Sep 17 00:00:00 2001 From: handongxun Date: Sat, 2 Apr 2022 14:25:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20pages.json=20=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=20tabbar=20=E5=AD=97=E4=BD=93=EF=BC=8C=20setTabBarIte?= =?UTF-8?q?m=20=E6=94=AF=E6=8C=81=20iconfont?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/ui/tabbar.md | 36 ++++++++++++++++++++++++++++++++++++ docs/collocation/pages.md | 24 +++++++++++++++++++++++- 2 files changed, 59 insertions(+), 1 deletion(-) diff --git a/docs/api/ui/tabbar.md b/docs/api/ui/tabbar.md index 51d72f224..bc50f9bfa 100644 --- a/docs/api/ui/tabbar.md +++ b/docs/api/ui/tabbar.md @@ -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": "\ue102", + "selectedText": "\ue103", + "fontSize": "17px", + "color": "#000000", + "selectedColor": "#0000ff" + } + } + ] + } +} +``` + ### uni.setTabBarStyle(OBJECT) 动态设置 tabBar 的整体样式 diff --git a/docs/collocation/pages.md b/docs/collocation/pages.md index db992136b..2855f3ce4 100644 --- a/docs/collocation/pages.md +++ b/docs/collocation/pages.md @@ -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/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)。 -- GitLab