71 lines
2.3 KiB
Markdown
71 lines
2.3 KiB
Markdown
# Composables 使用指南
|
|
|
|
## 导航栏状态管理 (useNavigation)
|
|
|
|
这个 composable 用于管理导航栏的状态，特别是检测当前路由栈中的页面数量，帮助决定是否显示返回首页按钮。
|
|
|
|
### 基本用法
|
|
|
|
```vue
|
|
<template>
|
|
<view class="custom-navbar">
|
|
<!-- 返回按钮 - 当路由栈有多个页面时显示 -->
|
|
<view v-if="hasMultiplePages" class="back-btn" @click="uni.navigateBack()">
|
|
<text class="ri-arrow-left-s-line"></text>
|
|
</view>
|
|
|
|
<!-- 返回首页按钮 - 当路由栈有多个页面且不是tabBar页面时显示 -->
|
|
<view v-if="hasMultiplePages && !isTabBarPage" class="home-btn" @click="toHome">
|
|
<text class="ri-home-line"></text>
|
|
</view>
|
|
|
|
<!-- 页面标题 -->
|
|
<view class="title">页面标题</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { useNavigation } from '@/composables/useNavigation'
|
|
|
|
// 使用导航 composable
|
|
const {
|
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
|
checkRouteStack // 检查当前路由栈状态的方法
|
|
} = useNavigation()
|
|
|
|
// 返回首页方法
|
|
const toHome = () => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
|
|
// 在 onShow 生命周期中重新检查路由栈状态
|
|
onShow(() => {
|
|
checkRouteStack()
|
|
})
|
|
</script>
|
|
```
|
|
|
|
### 关键属性和方法
|
|
|
|
| 名称 | 类型 | 说明 |
|
|
| --- | --- | --- |
|
|
| hasMultiplePages | Ref\<boolean\> | 路由栈中是否有多个页面，用于决定是否显示返回按钮 |
|
|
| isTabBarPage | Ref\<boolean\> | 当前页面是否为 tabBar 页面，用于决定是否显示返回首页按钮 |
|
|
| checkRouteStack | Function | 检查并更新当前路由栈状态的方法，在页面显示时调用 |
|
|
|
|
### 使用步骤
|
|
|
|
1. 在页面中导入 `useNavigation`
|
|
2. 在 `setup` 中调用此函数，获取状态和方法
|
|
3. 在 `onShow` 生命周期中调用 `checkRouteStack()` 方法更新状态
|
|
4. 在模板中根据 `hasMultiplePages` 和 `isTabBarPage` 状态显示或隐藏相应的按钮
|
|
|
|
### 注意事项
|
|
|
|
- 需要在每个页面的 `onShow` 生命周期中调用 `checkRouteStack()`，以确保状态始终是最新的
|
|
- tabBar 页面列表已经预设为 `['pages/index/index', 'pages/message/index', 'pages/mine/index']`，如需修改请直接编辑 `useNavigation.ts` 文件
|