docs(tabbar): 更新tabbar相关文档和注释
更新README.md文件中的配置说明和文件说明,使其更清晰准确 在store.ts中添加注释说明文件用途
This commit is contained in:
@@ -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` 提供渲染逻辑,代码可以稍微修改,以符合自己的需求。
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { tabbarList } from './config'
|
||||
|
||||
/**
|
||||
* 自定义 tabbar 的状态管理,原生 tabbar 无需关注本文件
|
||||
* tabbar 状态,增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
|
||||
* 使用reactive简单状态,而不是 pinia 全局状态
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user