index.tsx 1.1 KB

123456789101112131415161718192021222324252627282930313233
  1. import { View } from "@tarojs/components";
  2. import React from "react";
  3. import PageWrapper from "../page-wrapper/index";
  4. import { useAppStore } from "@/store/appStore";
  5. interface Props {
  6. children?: React.ReactChild | React.ReactChild[];
  7. bgColor?: string;
  8. isflex?: boolean; // 有横向滚动的scroll-view 容器不能包裹在 flex comlumn 布局中
  9. style?: React.CSSProperties;
  10. paddingTop?: number;
  11. fullPage?: boolean;
  12. }
  13. const Index: React.FC<Props> = ({ children, isflex = true, fullPage = false, paddingTop, style }) => {
  14. const headerHeight = useAppStore((state) => state.headerHeight);
  15. const bottomSafeHeight = useAppStore((state) => state.bottomSafeHeight);
  16. const flexStyle = isflex ? "flex flex-col items-center" : "";
  17. const offsetTop = paddingTop ?? headerHeight;
  18. const pageHeight = fullPage ? `calc(100vh - ${bottomSafeHeight}px)` : 'auto'
  19. return (
  20. <PageWrapper style={style}>
  21. <View
  22. className={`${flexStyle} h-full w-full`}
  23. style={{ paddingTop: offsetTop, height: pageHeight}}
  24. >
  25. {children}
  26. </View>
  27. </PageWrapper>
  28. );
  29. };
  30. export default Index;