press-next/mixin/page-scroll/index.ts

Vue3 组件库，支持 Composition API

import styles from 'press-ui/common/utils/style';

import { getStatusBarHeight } from '../../common/utils/status-bar-height';


export const getPageScrollMixin = (options: {
  watchPageScroll?: boolean;
} = {
  watchPageScroll: true,
}) =>  ({
  data() {
    return {
      mixinPageScrollTop: 0,
      mixinStatusBarHeight: 22,
    };
  },
  created(this: any) {
    // #ifdef MP
    getStatusBarHeight().then((res) => {
      this.mixinStatusBarHeight  = res;
    });
    // #endif
  },
  // #ifdef MP
  onPageScroll(this: any, { scrollTop }: {scrollTop: number}) {
    if (!options?.watchPageScroll) return;

    const mpHeaderHeight = this.mixinStatusBarHeight + 44;
    const mixinPageScrollTop =  this.mixinPageScrollTop || 44;

    const parsedScrollTop = scrollTop > mpHeaderHeight ? mpHeaderHeight : scrollTop;

    if (parsedScrollTop === mpHeaderHeight && mixinPageScrollTop === mpHeaderHeight) {
      return;
    }

    this.mixinPageScrollTop = parsedScrollTop;
  },
  // #endif
  computed: {
    mixinHeaderStyle(this: any) {
      const mpHeaderHeight = this.mixinStatusBarHeight + 44;
      const mpHeaderBg = `rgba(255, 255, 255, ${Math.min(1, this.mixinPageScrollTop / mpHeaderHeight)})`;

      return styles({
        backgroundColor: mpHeaderBg,
        paddingTop: `${this.mixinStatusBarHeight}px`,
        height: `${mpHeaderHeight}px`,
      });
    },
    mixinBgStyle(this: any) {
      let paddingTop: string | number = `${this.mixinStatusBarHeight}px`;

      // #ifdef H5
      paddingTop = 0;
      // #endif
      return styles({
        paddingTop,
      });
    },
  },
});