From 0aa753237a307b88097b10c1ebf4bc84e3c95499 Mon Sep 17 00:00:00 2001 From: srsng Date: Sat, 18 Oct 2025 23:52:16 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BF=AE=E5=A4=8D=E5=B0=91=E9=87=8Fty?= =?UTF-8?q?po=EF=BC=8C=E7=BB=9F=E4=B8=80``=20`=20``=E5=AF=B9tabbar?= =?UTF-8?q?=E7=9A=84=E5=8C=85=E8=A3=B9=E5=B9=B6=E6=B7=BB=E5=8A=A0=E4=B8=80?= =?UTF-8?q?=E4=BA=9B=E6=8D=A2=E8=A1=8C=E6=94=B9=E5=96=84=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E8=A7=86=E5=9B=BE=E7=9A=84=E6=8E=92=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 换行其实是markdownlint插件干的 --- src/tabbar/README.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/tabbar/README.md b/src/tabbar/README.md index c2b89eb..07d161d 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -5,17 +5,19 @@ `tabbar` 分为 `4 种` 情况： - 0 `无 tabbar`，只有一个页面入口，底部无 `tabbar` 显示；常用语临时活动页。 -- 1 `原生 tabbar`，使用 `switchTab` 切换 tabbar，`tabbar` 页面有缓存。 - - 优势：原生自带的 tabbar，最先渲染，有缓存。 + +- 1 `原生 tabbar`，使用 `switchTab` 切换 `tabbar`，`tabbar` 页面有缓存。 + - 优势：原生自带的 `tabbar`，最先渲染，有缓存。 - 劣势：只能使用 2 组图片来切换选中和非选中状态，修改颜色只能重新换图片（或者用 iconfont）。 -- 2 `有缓存自定义 tabbar`，使用 `switchTab` 切换 tabbar，`tabbar` 页面有缓存。使用了第三方 UI 库的 `tabbar` 组件，并隐藏了原生 `tabbar` 的显示。 + +- 2 `有缓存自定义 tabbar`，使用 `switchTab` 切换 `tabbar`，`tabbar` 页面有缓存。使用了第三方 UI 库的 `tabbar` 组件，并隐藏了原生 `tabbar` 的显示。 - 优势：可以随意配置自己想要的 `svg icon`，切换字体颜色方便。有缓存。可以实现各种花里胡哨的动效等。 - - 劣势：首次点击 tababr 会闪烁。 + - 劣势：首次点击 `tabbar` 会闪烁。 + - 3 `无缓存自定义 tabbar`，使用 `navigateTo` 切换 `tabbar`，`tabbar` 页面无缓存。使用了第三方 UI 库的 `tabbar` 组件。 - 优势：可以随意配置自己想要的 svg icon，切换字体颜色方便。可以实现各种花里胡哨的动效等。 - 劣势：首次点击 `tababr` 会闪烁，无缓存。 - > 注意：花里胡哨的效果需要自己实现，本模版不提供。 ## tabbar 配置说明 @@ -28,6 +30,7 @@ `config.ts` 专门配置 `nativeTabbarList` 和 `customTabbarList` 的相关信息，请按照文件里面的注释配置相关项。 使用 `原生tabbar` 时，不需要关心下面2个文件： + - `store.ts` ，专门给 `自定义 tabbar` 提供状态管理，代码几乎不需要修改。 - `index.vue` ，专门给 `自定义 tabbar` 提供渲染逻辑，代码可以稍微修改，以符合自己的需求。 @@ -42,6 +45,7 @@ "icon": "home", } ``` + - unocss 图标 ```js @@ -54,6 +58,7 @@ icon: 'i-carbon-code', } ``` + - iconfont 图标 ```js @@ -64,6 +69,7 @@ icon: 'iconfont icon-my', } ``` + - image 本地图片 ```js