1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <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";
| import { getSystemInfo } from "/@/cool/utils";
|
| 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 { statusBarHeight = 0 } = getSystemInfo();
| 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>
|
|
