|
@@ -26,7 +26,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { isEmpty, router } from "@/cool";
|
|
|
|
|
|
|
+import { isEmpty, isHarmony, router } from "@/cool";
|
|
|
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue";
|
|
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from "vue";
|
|
|
import { usePage } from "../../hooks";
|
|
import { usePage } from "../../hooks";
|
|
|
|
|
|
|
@@ -106,25 +106,30 @@ const stickyTop = computed(() => {
|
|
|
// 获取sticky元素的位置信息,并更新rect
|
|
// 获取sticky元素的位置信息,并更新rect
|
|
|
function getRect() {
|
|
function getRect() {
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
- uni.createSelectorQuery()
|
|
|
|
|
- .in(proxy)
|
|
|
|
|
- .select(".cl-sticky")
|
|
|
|
|
- .boundingClientRect()
|
|
|
|
|
- .exec((nodes) => {
|
|
|
|
|
- if (isEmpty(nodes)) {
|
|
|
|
|
- return;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- const node = nodes[0] as NodeInfo;
|
|
|
|
|
-
|
|
|
|
|
- // 赋值时做空值处理,保证类型安全
|
|
|
|
|
- rect.height = node.height ?? 0;
|
|
|
|
|
-
|
|
|
|
|
- rect.width = node.width ?? 0;
|
|
|
|
|
- rect.left = node.left ?? 0;
|
|
|
|
|
- // top需要减去offsetTop并加上当前滚动距离,保证吸顶准确
|
|
|
|
|
- rect.top = (node.top ?? 0) - props.offsetTop + scrollTop.value;
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ setTimeout(
|
|
|
|
|
+ () => {
|
|
|
|
|
+ uni.createSelectorQuery()
|
|
|
|
|
+ .in(proxy)
|
|
|
|
|
+ .select(".cl-sticky")
|
|
|
|
|
+ .boundingClientRect()
|
|
|
|
|
+ .exec((nodes) => {
|
|
|
|
|
+ if (isEmpty(nodes)) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const node = nodes[0] as NodeInfo;
|
|
|
|
|
+
|
|
|
|
|
+ // 赋值时做空值处理,保证类型安全
|
|
|
|
|
+ rect.height = node.height ?? 0;
|
|
|
|
|
+
|
|
|
|
|
+ rect.width = node.width ?? 0;
|
|
|
|
|
+ rect.left = node.left ?? 0;
|
|
|
|
|
+ // top需要减去offsetTop并加上当前滚动距离,保证吸顶准确
|
|
|
|
|
+ rect.top = (node.top ?? 0) - props.offsetTop + scrollTop.value;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ isHarmony() ? 300 : 0
|
|
|
|
|
+ );
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -156,10 +161,10 @@ defineExpose({
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.cl-sticky {
|
|
.cl-sticky {
|
|
|
- @apply relative;
|
|
|
|
|
|
|
+ @apply relative w-full;
|
|
|
|
|
|
|
|
&.is-active {
|
|
&.is-active {
|
|
|
- @apply fixed;
|
|
|
|
|
|
|
+ @apply fixed w-full;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|