docs(tabbar): 更新tabbar相关文档和注释

更新README.md文件中的配置说明和文件说明,使其更清晰准确
在store.ts中添加注释说明文件用途
This commit is contained in:
feige996
2025-08-17 15:00:43 +08:00
parent e7ef297872
commit 2293e635bf
2 changed files with 7 additions and 6 deletions

View File

@@ -20,13 +20,13 @@
## tabbar 配置说明
- 如果使用的是原生tabbar, 每个 `item` 需要配置 `path``text``iconPath``selectedIconPath` 等属性。
- 如果使用的是自定义tabbar, 每个 `item` 需要配置 `path``text``icon``iconType` 等属性(如果是local还需要配置2种图片
- 如果使用的是原生tabbar, 需要配置 `nativeTabbarList`每个 `item` 需要配置 `path``text``iconPath``selectedIconPath` 等属性。
- 如果使用的是自定义tabbar, 需要配置 `customTabbarList`每个 `item` 需要配置 `path``text``icon``iconType` 等属性(如果是 `image` 图片还需要配置2种图片
## 接口拿到tabbar列表怎么处理
## 文件说明
首先接口的配置需要跟原生tabbar的 `path` 对应上
`config.ts` 专门配置 `nativeTabbarList``customTabbarList` 的相关信息,请按照文件里面的注释配置相关项
然后,可以直接在 `index.vue` 文件请求接口拿到 `tabbarList`,然后赋值给 `tabbarList` 即可
`store.ts` 专门给 `自定义 tabbar` 提供状态管理,代码几乎不需要修改
最后,如果用的是 `unocss` 图标,还需要在 `uno.config.ts``safelist` 中添加图标名称
`index.vue` 专门给 `自定义 tabbar` 提供渲染逻辑,代码可以稍微修改,以符合自己的需求

View File

@@ -1,6 +1,7 @@
import { tabbarList } from './config'
/**
* 自定义 tabbar 的状态管理,原生 tabbar 无需关注本文件
* tabbar 状态,增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
* 使用reactive简单状态而不是 pinia 全局状态
*/