70 lines
1.2 KiB
Vue
70 lines
1.2 KiB
Vue
<template>
|
|
<view
|
|
class="cl-sticky"
|
|
:class="[{ 'is-flex': isFlex }]"
|
|
:style="{ zIndex, top: stickyTop, backgroundColor }"
|
|
>
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent } from "vue";
|
|
import { useCool } from "/@/cool";
|
|
|
|
const { statusBarHeight } = uni.getSystemInfoSync();
|
|
|
|
export default defineComponent({
|
|
name: "cl-sticky",
|
|
|
|
props: {
|
|
zIndex: {
|
|
type: Number,
|
|
default: 100,
|
|
},
|
|
top: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
statusBar: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isFlex: Boolean,
|
|
backgroundColor: String,
|
|
},
|
|
|
|
setup(props) {
|
|
const { router } = useCool();
|
|
|
|
// 吸顶高度
|
|
const stickyTop = computed(() => {
|
|
// 状态栏高度
|
|
const t1 = `${props.statusBar ? statusBarHeight : 0}px`;
|
|
|
|
// 标题栏高度
|
|
// #ifdef H5
|
|
// @ts-ignore
|
|
const t2 = "44px";
|
|
// #endif
|
|
// #ifndef H5
|
|
// @ts-ignore
|
|
const t2 = "0px";
|
|
// #endif
|
|
|
|
// 自定义高度
|
|
const top = uni.upx2px(props.top) + "px";
|
|
|
|
// 计算后距离顶部高度
|
|
const arr = [top, ...(router.info()?.isCustomNavbar ? [t1] : [t2])];
|
|
|
|
return `calc(${arr.join(" + ")})`;
|
|
});
|
|
|
|
return {
|
|
stickyTop,
|
|
};
|
|
},
|
|
});
|
|
</script>
|