ieplus-app/src/hooks/useScroll.ts

import { onPageScroll } from '@dcloudio/uni-app';

export const useScroll = (height?: number) => {
  const scrollTop = ref(0);
  const isHide = ref(false);
  const opacity = computed(() => {
    if (height) {
      return Math.max(1 - (scrollTop.value / height), 0)
    }
    return 0;
  });

  /**
   * 滚动到指定位置
   * @param selector 
   * @param offset 
   */
  const scrollTo = async (selector: string, offset: number = 0) => {
    const rect2 = await getRect(selector);
    uni.pageScrollTo({
      scrollTop: scrollTop.value + rect2.top - offset,
      duration: 500
    });
  }

  /**
   * 获取指定位置的矩形
   * @param selector 
   * @returns 
   */
  const getRect = (selector: string) => {
    return new Promise((resolve: (rect: { top: number, height: number }) => void) => {
      const query = uni.createSelectorQuery();
      query.select(selector).boundingClientRect(function (rect) {
        resolve(rect as { top: number, height: number });
      }).exec();
    });
  }

  onHide(() => {
    isHide.value = true;
  })

  onShow(() => {
    isHide.value = false;
  })

  onPageScroll((e: any) => {
    if (!isHide.value) {
      scrollTop.value = e.scrollTop
    }
  });
  return {
    scrollTop,
    opacity,
    scrollTo,
    getRect
  };
}