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>
<div class="app-shell" :class="shellClass">
<div class="app-body">
<AppHeader v-if="showHeader" />
<AppHeader v-if="showFullHeader" />
<AppHeader v-else-if="showMpBackBar" back-only />
<router-view />
</div>
<IcpFooter class="app-footer" />
@@ -11,14 +12,21 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AppHeader from './components/AppHeader.vue'
import IcpFooter from './components/IcpFooter.vue'
import TabBar from './components/TabBar.vue'
import { isMpEmbed, isMpNativeHeader } from './lib/mpEmbed'
const route = useRoute()
const mpEmbed = isMpEmbed()
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(() => ({
'mp-embed': mpEmbed,
'mp-native-header': mpNativeHeader,
+20 -3
View File
@@ -1,12 +1,20 @@
<template>
<header class="app-header" :class="{ 'is-embed': mpEmbed }">
<header
class="app-header"
:class="{ 'is-embed': mpEmbed, 'back-only': backOnly }"
>
<div class="side left">
<BackButton v-if="showBack" />
</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" />
</router-link>
<div class="side right" aria-hidden="true" />
<div v-if="!backOnly" class="side right" aria-hidden="true" />
</header>
</template>
@@ -17,8 +25,11 @@ import BackButton from './BackButton.vue'
import BrandLogo from './BrandLogo.vue'
import { isMpEmbed } from '../lib/mpEmbed'
const props = defineProps<{ backOnly?: boolean }>()
const route = useRoute()
const mpEmbed = isMpEmbed()
const backOnly = computed(() => props.backOnly === true)
/** 首页 / 我的 为 Tab 根页不显示返回;探索可从首页进入,显示返回 */
const showBack = computed(() => {
@@ -47,6 +58,12 @@ const showBack = computed(() => {
padding: calc(6px + var(--yxg-safe-top)) 12px 8px;
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 {
display: flex;
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{
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;
}
html.mp-embed.mp-native-header .app-shell .home,