增加hooks方法 判断路由栈数量 兼容微信小程序导航栏返回首页的功能(home)
This commit is contained in:
parent
79822067b1
commit
1cd188f1db
|
|
@ -0,0 +1,70 @@
|
|||
# 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` 文件
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import { ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 导航栏状态管理 Composable
|
||||
* 检查当前路由栈是否大于1条，用于决定是否显示返回首页按钮
|
||||
* @returns 包含路由栈状态和相关方法的对象
|
||||
*/
|
||||
export function useNavigation() {
|
||||
// 是否有多个页面在路由栈中
|
||||
const hasMultiplePages = ref(false)
|
||||
// 当前页面是否为 tabBar 页面
|
||||
const isTabBarPage = ref(false)
|
||||
// tabBar 页面路径列表
|
||||
const tabBarPages = [
|
||||
'pages/index/index',
|
||||
'pages/message/index',
|
||||
'pages/mine/index'
|
||||
]
|
||||
|
||||
/**
|
||||
* 检查当前页面是否为 tabBar 页面
|
||||
*/
|
||||
const checkIsTabBarPage = (currentRoute: string) => {
|
||||
isTabBarPage.value = tabBarPages.includes(currentRoute)
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查当前路由栈状态
|
||||
* 在每个页面的 onShow 或 onLoad 生命周期调用此方法
|
||||
*/
|
||||
const checkRouteStack = () => {
|
||||
// 获取当前页面路由
|
||||
const pages = getCurrentPages()
|
||||
// 获取当前页面路径
|
||||
const currentRoute = pages[pages.length - 1]?.route || ''
|
||||
|
||||
// 更新路由栈状态
|
||||
hasMultiplePages.value = pages.length > 1
|
||||
// 检查是否为 tabBar 页面
|
||||
checkIsTabBarPage(currentRoute)
|
||||
}
|
||||
|
||||
return {
|
||||
hasMultiplePages,
|
||||
isTabBarPage,
|
||||
checkRouteStack
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,9 @@
|
|||
safeAreaInsetTop fixed placeholder>
|
||||
<template #left>
|
||||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||
<text class="ri-arrow-left-s-line li-text-70" @click="toPages({type:'nav'})"></text>
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70" @click="toPages({type:'nav'})"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">工单详情</text>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -139,7 +141,18 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useNavigation } from '@/hooks/useNavigation'
|
||||
// 使用导航 composable
|
||||
const {
|
||||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||||
checkRouteStack // 检查当前路由栈状态的方法
|
||||
} = useNavigation()
|
||||
|
||||
onLoad(() => {
|
||||
checkRouteStack()
|
||||
})
|
||||
// 状态颜色配置
|
||||
const getStatusColor = (status : number) => {
|
||||
const colorMap = {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
<view class="li-work-nav">
|
||||
<SafeAreaTop />
|
||||
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||
<text class="ri-arrow-left-s-line li-text-70" @click="toPages({type:'nav'})"></text>
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
||||
@click="toPages({type:'nav'})"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mr-6 li-mb-8"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">我的工单</text>
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
|
|
@ -88,7 +91,19 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
|
||||
import { useNavigation } from '@/hooks/useNavigation'
|
||||
// 使用导航 composable
|
||||
const {
|
||||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||||
checkRouteStack // 检查当前路由栈状态的方法
|
||||
} = useNavigation()
|
||||
|
||||
onLoad(() => {
|
||||
checkRouteStack()
|
||||
})
|
||||
|
||||
const keyword = ref('')
|
||||
const activeTab = ref(0)
|
||||
|
|
@ -190,6 +205,11 @@
|
|||
delta: 1
|
||||
});
|
||||
break;
|
||||
case 'home':
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
case 'detail':
|
||||
uni.navigateTo({
|
||||
url: '/pagesA/my_order/detail'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
<view class="li-task-nav">
|
||||
<SafeAreaTop />
|
||||
<view @click="toPages({type:'nav'})" class="li-ml-15 li-mt-10 li-flex li-items-center">
|
||||
<text class="ri-arrow-left-s-line li-text-70"></text>
|
||||
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"></text>
|
||||
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mr-6 li-mb-8"
|
||||
@click="toPages({type:'home'})"></text>
|
||||
<text class="li-text-42">工单大厅</text>
|
||||
</view>
|
||||
<wd-drop-menu class="li-w-100%">
|
||||
|
|
@ -65,7 +67,18 @@
|
|||
import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
import { useNavigation } from '@/hooks/useNavigation'
|
||||
// 使用导航 composable
|
||||
const {
|
||||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||||
checkRouteStack // 检查当前路由栈状态的方法
|
||||
} = useNavigation()
|
||||
|
||||
onLoad(() => {
|
||||
checkRouteStack()
|
||||
})
|
||||
|
||||
const value1 = ref<number>(0)
|
||||
const value2 = ref<number>(0)
|
||||
const option1 = ref<Record<string, any>>([
|
||||
|
|
@ -120,6 +133,11 @@
|
|||
delta: 1
|
||||
});
|
||||
break;
|
||||
case 'home':
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,38 @@
|
|||
|
||||
.li-bg-white{background-color:rgb(255,255,255)}
|
||||
.li-flex{display:flex}
|
||||
.li-flex-center{display:flex;align-items:center;justify-content:center}
|
||||
.li-h-100{height:100rpx}
|
||||
.li-items-center{align-items:center}
|
||||
.li-justify-between{justify-content:space-between}
|
||||
.li-ml-20{margin-left:20rpx}
|
||||
.li-ml-25{margin-left:25rpx}
|
||||
.li-ml-30{margin-left:30rpx}
|
||||
.li-mr-10{margin-right:10rpx}
|
||||
.li-mr-25{margin-right:25rpx}
|
||||
.li-mr-30{margin-right:30rpx}
|
||||
.li-mt-10{margin-top:10rpx}
|
||||
.li-mt-20{margin-top:20rpx}
|
||||
.li-pt-2{padding-top:2rpx}
|
||||
.li-px-30{padding-left:30rpx;padding-right:30rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-rd-full-50{border-radius:50%}
|
||||
.li-text-25{font-size:25rpx}
|
||||
.li-text-26{font-size:26rpx}
|
||||
.li-text-30{font-size:30rpx}
|
||||
.li-text-35{font-size:35rpx}
|
||||
.li-text-38{font-size:38rpx}
|
||||
.li-text-42{font-size:42rpx}
|
||||
.li-text-46{font-size:46rpx}
|
||||
.li-text-B1B0B0-color{color:rgb(177,176,176)}
|
||||
.li-w-100{width:100rpx}
|
||||
.li-w-full-80{width:80%}
|
||||
.li-items-center{align-items:center}
|
||||
.items-center{align-items:center}
|
||||
.items-center{align-items:center}
|
||||
.li-justify-center{justify-content:center}
|
||||
.justify-center{justify-content:center}
|
||||
.justify-between{justify-content:space-between}
|
||||
.justify-end{justify-content:end}
|
||||
.justify-center{justify-content:center}
|
||||
.li-justify-between{justify-content:space-between}
|
||||
|
|
@ -51,22 +82,6 @@
|
|||
.li-w-58{width:58rpx}
|
||||
.li-w-full-70{width:70%}
|
||||
.li-w-full-88{width:88%}
|
||||
.li-h-100{height:100rpx}
|
||||
.li-ml-20{margin-left:20rpx}
|
||||
.li-ml-200{margin-left:200rpx}
|
||||
.li-ml-30{margin-left:30rpx}
|
||||
.li-mr-10{margin-right:10rpx}
|
||||
.li-mr-30{margin-right:30rpx}
|
||||
.li-pt-2{padding-top:2rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-rd-full-50{border-radius:50%}
|
||||
.li-text-25{font-size:25rpx}
|
||||
.li-text-35{font-size:35rpx}
|
||||
.li-text-38{font-size:38rpx}
|
||||
.li-text-42{font-size:42rpx}
|
||||
.li-text-46{font-size:46rpx}
|
||||
.li-w-100{width:100rpx}
|
||||
.li-w-full-80{width:80%}
|
||||
.li-font-550{font-weight:550}
|
||||
.li-h-68{height:68rpx}
|
||||
.li-mt-100{margin-top:100rpx}
|
||||
|
|
@ -79,11 +94,28 @@
|
|||
.li-rd-40{border-radius:40rpx}
|
||||
.li-text-000000-color{color:rgb(0,0,0)}
|
||||
.li-text-2EA1EA-color{color:rgb(46,161,234)}
|
||||
.li-text-38{font-size:38rpx}
|
||||
.li-text-a5a5a5-color{color:rgb(165,165,165)}
|
||||
.li-w-150{width:150rpx}
|
||||
.li-w-420{width:420rpx}
|
||||
.li-w-full-80{width:80%}
|
||||
.li-w-full-85{width:85%}
|
||||
.li-w-full-90{width:90%}
|
||||
.li-h-100{height:100rpx}
|
||||
.li-ml-20{margin-left:20rpx}
|
||||
.li-ml-200{margin-left:200rpx}
|
||||
.li-ml-30{margin-left:30rpx}
|
||||
.li-mr-10{margin-right:10rpx}
|
||||
.li-mr-30{margin-right:30rpx}
|
||||
.li-pt-2{padding-top:2rpx}
|
||||
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
|
||||
.li-rd-full-50{border-radius:50%}
|
||||
.li-text-25{font-size:25rpx}
|
||||
.li-text-35{font-size:35rpx}
|
||||
.li-text-42{font-size:42rpx}
|
||||
.li-text-46{font-size:46rpx}
|
||||
.li-w-100{width:100rpx}
|
||||
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
||||
.bg-FFFFFF{background-color:rgb(255,255,255)}
|
||||
.bg-f9f9f9{background-color:rgb(249,249,249)}
|
||||
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
|
||||
|
|
@ -126,6 +158,7 @@
|
|||
.li-w-50{width:50rpx}
|
||||
.li-w-60{width:60rpx}
|
||||
.li-w-full-94{width:94%}
|
||||
.li-mb-8{margin-bottom:8rpx}
|
||||
.li-ml-15{margin-left:15rpx}
|
||||
.li-ml-6{margin-left:6rpx}
|
||||
.li-mr-6{margin-right:6rpx}
|
||||
|
|
@ -137,6 +170,7 @@
|
|||
.li-text-323232-color{color:rgb(50,50,50)}
|
||||
.li-text-333333-color{color:rgb(51,51,51)}
|
||||
.li-text-36{font-size:36rpx}
|
||||
.li-text-55{font-size:55rpx}
|
||||
.li-text-70{font-size:70rpx}
|
||||
.li-text-9a9a9a-color{color:rgb(154,154,154)}
|
||||
.li-text-ff0000-color{color:rgb(255,0,0)}
|
||||
|
|
@ -145,10 +179,6 @@
|
|||
.li-mb-25{margin-bottom:25rpx}
|
||||
.li-text-009aff-color{color:rgb(0,154,255)}
|
||||
.li-text-999-color{color:rgb(153,153,153)}
|
||||
.li-font-400{font-weight:400}
|
||||
.li-m-30{margin:30rpx}
|
||||
.li-text-595959-color{color:rgb(89,89,89)}
|
||||
|
||||
.li-bottom-0{bottom:0}
|
||||
.li-fixed{position:fixed}
|
||||
.li-h-110{height:110rpx}
|
||||
|
|
@ -172,6 +202,64 @@
|
|||
.li-w-110{width:110rpx}
|
||||
.li-w-400{width:400rpx}
|
||||
.overflow-hidden{overflow:hidden}
|
||||
.li-font-400{font-weight:400}
|
||||
.li-m-30{margin:30rpx}
|
||||
.li-text-595959-color{color:rgb(89,89,89)}
|
||||
.li-flex-col{flex-direction:column}
|
||||
.li-font-bold{font-weight:bold}
|
||||
.li-h-130{height:130rpx}
|
||||
.li-h-160{height:160rpx}
|
||||
.li-h-220{height:220rpx}
|
||||
.li-h-58{height:58rpx}
|
||||
.li-justify-around{justify-content:space-around}
|
||||
.li-ml-22{margin-left:22rpx}
|
||||
.li-ml-35{margin-left:35rpx}
|
||||
.li-mr-5{margin-right:5rpx}
|
||||
.li-mt-12{margin-top:12rpx}
|
||||
.li-mt-14{margin-top:14rpx}
|
||||
.li-mt-15{margin-top:15rpx}
|
||||
.li-mt-30{margin-top:30rpx}
|
||||
.li-mx-auto{margin-left:auto;margin-right:auto}
|
||||
.li-pt-15{padding-top:15rpx}
|
||||
.li-px-25{padding-left:25rpx;padding-right:25rpx}
|
||||
.li-px-40{padding-left:40rpx;padding-right:40rpx}
|
||||
.li-px-50{padding-left:50rpx;padding-right:50rpx}
|
||||
.li-py-25{padding-top:25rpx;padding-bottom:25rpx}
|
||||
.li-rd-10{border-radius:10rpx}
|
||||
.li-rd-15{border-radius:15rpx}
|
||||
.li-text-010B3E-color{color:rgb(1,11,62)}
|
||||
.li-text-22{font-size:22rpx}
|
||||
.li-text-24{font-size:24rpx}
|
||||
.li-text-28{font-size:28rpx}
|
||||
.li-text-343333-color{color:rgb(52,51,51)}
|
||||
.li-text-43{font-size:43rpx}
|
||||
.li-text-48{font-size:48rpx}
|
||||
.li-text-AFB2B8-color{color:rgb(175,178,184)}
|
||||
.li-text-F42429-color{color:rgb(244,36,41)}
|
||||
.li-w-130{width:130rpx}
|
||||
.li-w-310{width:310rpx}
|
||||
.li-w-58{width:58rpx}
|
||||
.li-w-full-70{width:70%}
|
||||
.li-w-full-88{width:88%}
|
||||
.pt-10{padding-top:10rpx}
|
||||
|
||||
|
||||
.li-mb-8{margin-bottom:8rpx}
|
||||
.li-ml-15{margin-left:15rpx}
|
||||
.li-ml-6{margin-left:6rpx}
|
||||
.li-mr-6{margin-right:6rpx}
|
||||
.li-p-15{padding:15rpx}
|
||||
.li-pb-15{padding-bottom:15rpx}
|
||||
.li-pb-30{padding-bottom:30rpx}
|
||||
.li-pt-25{padding-top:25rpx}
|
||||
.li-pt-4{padding-top:4rpx}
|
||||
.li-text-32{font-size:32rpx}
|
||||
.li-text-323232-color{color:rgb(50,50,50)}
|
||||
.li-text-333333-color{color:rgb(51,51,51)}
|
||||
.li-text-36{font-size:36rpx}
|
||||
.li-text-55{font-size:55rpx}
|
||||
.li-text-70{font-size:70rpx}
|
||||
.li-text-9a9a9a-color{color:rgb(154,154,154)}
|
||||
.li-text-ff0000-color{color:rgb(255,0,0)}
|
||||
.li-w-full-100{width:100%}
|
||||
.li-w-full-92{width:92%}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue