cl-footer 高度做隔离处理,不遮挡主题切换

This commit is contained in:
icssoa
2025-08-21 11:20:45 +08:00
parent 96d44d1687
commit 7dccf02c03
5 changed files with 28 additions and 1 deletions

View File

@@ -15,6 +15,7 @@
import { getTabBarHeight, hasCustomTabBar, scroller } from "@/cool";
import { computed, onMounted, ref, watch, type PropType } from "vue";
import { usePage } from "../../hooks";
import { clFooterOffset } from "../cl-footer/offset";
defineOptions({
name: "cl-back-top"
@@ -43,6 +44,8 @@ const bottom = computed(() => {
if (hasCustomTabBar()) {
h += getTabBarHeight();
} else {
h += clFooterOffset.get();
}
return h + "px";

View File

@@ -14,6 +14,7 @@
<script setup lang="ts">
import { getSafeAreaHeight, getTabBarHeight, hasCustomTabBar, router } from "@/cool";
import { computed, reactive } from "vue";
import { clFooterOffset } from "../cl-footer/offset";
defineOptions({
name: "cl-float-view"
@@ -109,6 +110,9 @@ const viewStyle = computed(() => {
// 标签页需要额外减去标签栏高度和安全区域
if (hasCustomTabBar()) {
bottomOffset += getTabBarHeight();
} else {
// 获取其他组件注入的底部偏移
bottomOffset += clFooterOffset.get();
}
// 设置水平位置

View File

@@ -23,6 +23,7 @@
import { getSafeAreaHeight, isDark, isHarmony, parsePt } from "@/cool";
import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
import type { PassThroughProps } from "../../types";
import { clFooterOffset } from "./offset";
defineOptions({
name: "cl-footer"
@@ -77,6 +78,9 @@ function getHeight() {
// 如果内容高度大于最小高度,则显示
visible.value = h > props.minHeight + getSafeAreaHeight("bottom");
// 隔离高度
clFooterOffset.set(visible.value ? h : 0);
})
.exec();
},

View File

@@ -0,0 +1,16 @@
import { router } from "@/cool";
import { reactive } from "vue";
export class ClFooterOffset {
private data = reactive({});
set(value: number): void {
this.data[router.path()] = value;
}
get(): number {
return (this.data[router.path()] as number | null) ?? 0;
}
}
export const clFooterOffset = new ClFooterOffset();