fix(h5): 小程序 nh=1 模式保留子页返回按钮

原生顶栏隐藏 logo 顶栏时,非首页/我的仍显示 BackButton。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-25 04:43:07 +08:00
co-authored by Cursor
parent fc53be22f8
commit db4d118f9a
3 changed files with 34 additions and 6 deletions
+10 -2
View File
@@ -1,7 +1,8 @@
<template> <template>
<div class="app-shell" :class="shellClass"> <div class="app-shell" :class="shellClass">
<div class="app-body"> <div class="app-body">
<AppHeader v-if="showHeader" /> <AppHeader v-if="showFullHeader" />
<AppHeader v-else-if="showMpBackBar" back-only />
<router-view /> <router-view />
</div> </div>
<IcpFooter class="app-footer" /> <IcpFooter class="app-footer" />
@@ -11,14 +12,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AppHeader from './components/AppHeader.vue' import AppHeader from './components/AppHeader.vue'
import IcpFooter from './components/IcpFooter.vue' import IcpFooter from './components/IcpFooter.vue'
import TabBar from './components/TabBar.vue' import TabBar from './components/TabBar.vue'
import { isMpEmbed, isMpNativeHeader } from './lib/mpEmbed' import { isMpEmbed, isMpNativeHeader } from './lib/mpEmbed'
const route = useRoute()
const mpEmbed = isMpEmbed() const mpEmbed = isMpEmbed()
const mpNativeHeader = isMpNativeHeader() const mpNativeHeader = isMpNativeHeader()
const showHeader = !mpNativeHeader const showFullHeader = computed(() => !mpNativeHeader)
const showMpBackBar = computed(() => {
if (!mpEmbed || !mpNativeHeader) return false
const p = route.path
return p !== '/' && p !== '/mine'
})
const shellClass = computed(() => ({ const shellClass = computed(() => ({
'mp-embed': mpEmbed, 'mp-embed': mpEmbed,
'mp-native-header': mpNativeHeader, 'mp-native-header': mpNativeHeader,
+20 -3
View File
@@ -1,12 +1,20 @@
<template> <template>
<header class="app-header" :class="{ 'is-embed': mpEmbed }"> <header
class="app-header"
:class="{ 'is-embed': mpEmbed, 'back-only': backOnly }"
>
<div class="side left"> <div class="side left">
<BackButton v-if="showBack" /> <BackButton v-if="showBack" />
</div> </div>
<router-link to="/" class="logo-link" aria-label="愈心谷首页"> <router-link
v-if="!backOnly"
to="/"
class="logo-link"
aria-label="愈心谷首页"
>
<BrandLogo size="header" class="logo" /> <BrandLogo size="header" class="logo" />
</router-link> </router-link>
<div class="side right" aria-hidden="true" /> <div v-if="!backOnly" class="side right" aria-hidden="true" />
</header> </header>
</template> </template>
@@ -17,8 +25,11 @@ import BackButton from './BackButton.vue'
import BrandLogo from './BrandLogo.vue' import BrandLogo from './BrandLogo.vue'
import { isMpEmbed } from '../lib/mpEmbed' import { isMpEmbed } from '../lib/mpEmbed'
const props = defineProps<{ backOnly?: boolean }>()
const route = useRoute() const route = useRoute()
const mpEmbed = isMpEmbed() const mpEmbed = isMpEmbed()
const backOnly = computed(() => props.backOnly === true)
/** 首页 / 我的 为 Tab 根页不显示返回;探索可从首页进入,显示返回 */ /** 首页 / 我的 为 Tab 根页不显示返回;探索可从首页进入,显示返回 */
const showBack = computed(() => { const showBack = computed(() => {
@@ -47,6 +58,12 @@ const showBack = computed(() => {
padding: calc(6px + var(--yxg-safe-top)) 12px 8px; padding: calc(6px + var(--yxg-safe-top)) 12px 8px;
background: transparent; background: transparent;
} }
.app-header.back-only {
display: block;
grid-template-columns: 44px;
padding: calc(4px + var(--yxg-page-top, 0px)) 12px 4px;
pointer-events: none;
}
.side { .side {
display: flex; display: flex;
align-items: center; align-items: center;
+4 -1
View File
@@ -75,7 +75,10 @@ html.mp-embed.mp-native-header body{
html.mp-embed.mp-native-header .app-shell.mp-embed::before{ html.mp-embed.mp-native-header .app-shell.mp-embed::before{
background-color:#ffd1c7; background-color:#ffd1c7;
} }
html.mp-embed.mp-native-header .app-header{ html.mp-embed.mp-native-header .app-header.back-only{
display:block;
}
html.mp-embed.mp-native-header .app-header:not(.back-only){
display:none !important; display:none !important;
} }
html.mp-embed.mp-native-header .app-shell .home, html.mp-embed.mp-native-header .app-shell .home,