cl-footer 高度做隔离处理,不遮挡主题切换
This commit is contained in:
@@ -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";
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
// 设置水平位置
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
16
uni_modules/cool-ui/components/cl-footer/offset.ts
Normal file
16
uni_modules/cool-ui/components/cl-footer/offset.ts
Normal 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();
|
||||
Reference in New Issue
Block a user