46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
/*
|
||
* @file /src/vue3/hooks/top-sticky.ts
|
||
* @description 吸顶工具
|
||
* @author tsl (randy1924@163.com)
|
||
* @date 2026-03-20 17:51:50
|
||
* @lastModified 2026-03-26 10:24:21
|
||
* @lastModifiedBy tsl (randy1924@163.com)
|
||
*/
|
||
|
||
import { ref } from "vue";
|
||
|
||
export interface UseTopStickyOptions {
|
||
context?: never;
|
||
offsetTop?: number;
|
||
targetSelector: string;
|
||
onToTopChange?: (toTop: boolean) => void;
|
||
}
|
||
|
||
export function useTopSticky(options: UseTopStickyOptions) {
|
||
const context = options.context;
|
||
const offsetTop = options.offsetTop ?? 0;
|
||
const targetSelector = options.targetSelector;
|
||
const onToTopChange = options.onToTopChange;
|
||
|
||
// 是否达到了顶部
|
||
const isToTop = ref(false);
|
||
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const intersectionObserver = uni.createIntersectionObserver(context);
|
||
|
||
// 观察目标元素
|
||
intersectionObserver
|
||
.relativeToViewport({
|
||
top: 0,
|
||
bottom: -systemInfo.windowHeight + offsetTop,
|
||
})
|
||
.observe(targetSelector, (res) => {
|
||
console.log("intersectionObserver", res);
|
||
// 当目标与视口顶部距离小于0px时，isToTop 设为 true
|
||
isToTop.value = res.intersectionRatio > 0;
|
||
onToTopChange?.(isToTop.value);
|
||
});
|
||
|
||
return { isToTop };
|
||
}
|