exam_mp/components/Container/Container.vue

<script setup>
import Empty from "../Empty/Empty.vue";
import { ref, onMounted, watchEffect } from "vue";
import { router, getRoute } from "../../utils/router";
import { getRect, debounce } from "../../utils";
import { getCurrentInstance } from "vue";
import pages from "@/pages.json";

const props = defineProps({
  showBottom: {
    type: Boolean,
    default: false,
  },
  bottomText: {
    type: String,
    default: "~已经到底了~",
  },
  scrollX: {
    type: Boolean,
    default: false,
  },
  scrollY: {
    type: Boolean,
    default: true,
  },
  className: {
    type: String,
    default: "",
  },
  scrollIntoView: {
    type: String,
    default: "",
  },
  scrollStyle: {
    type: Object,
    default: () => ({}),
  },
  onBack: Function,
  showBack: {
    type: Boolean,
    default: true,
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  bgColor: {
    type: String,
    default: "#fff",
  },
  title: String,
  empty: {
    type: [Boolean],
    default: false,
  },
  border: {
    type: Boolean,
    default: false,
  },
  scrollTop: {
    type: Number,
    default: 0,
  },
  headerColor: {
    type: String,
    default: "transparent",
  },
  bottomBgColor: {
    type: String,
    default: "transparent",
  },
  bottomBorder: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["onSafeAreaChange", "onScroll"]);

const onBack = async () => {
  if (props.onBack) {
    const res = await props.onBack();
    if (!res) return;
    router.back();
    return;
  }
  router.back();
};

const safeArea = ref({
  footer: {},
  title: {},
});
const footerHeight = ref(0);

const menuButtonInfo = ref({
  top: 0,
  height: 0,
  width: 0,
});

onMounted(() => {
  const _menuButtonInfo = uni.getMenuButtonBoundingClientRect();

  menuButtonInfo.value = {
    top: _menuButtonInfo.top,
    height: _menuButtonInfo.height,
    width: _menuButtonInfo.width,
  };

  const systemInfo = uni.getWindowInfo();
  // 判断是否为tabbar页面
  safeArea.value = {
    ...systemInfo.safeArea,
    source: systemInfo.safeArea,
  };

  // 解决部分安卓手机安全顶部为0 的bug
  if (!safeArea.value.top) {
    safeArea.value.top = systemInfo.statusBarHeight;
  }

  const isTarbarPage = pages.tabBar.list
    .map((item) => item.pagePath)
    .includes(getRoute().routeList[0].path);

  if (
    safeArea.value.source.bottom === safeArea.value.source.height &&
    isTarbarPage
  ) {
    safeArea.value.height -= 50;
  }

  // 24是内边距
  safeArea.value.width -= 24;

  const instance = getCurrentInstance();
  // 获取头部高度
  getRect({
    name: ".title",
    onSuccess(res) {
      safeArea.value.title = res;
      safeArea.value.height -= props.showTitle
        ? isTarbarPage
          ? safeArea.value.title?.height + safeArea.value.top
          : safeArea.value.title?.height
        : 0;
    },
    instance,
  });
  // 获取底部高度
  getRect({
    name: ".bottom-button",
    onSuccess(res) {
      safeArea.value.footer = res;
      safeArea.value.height -= safeArea.value.footer?.height;
      safeArea.value.height += 22; // 剩余高度
    },
    instance,
  });
});

watchEffect(() => {
  emit("onSafeAreaChange", safeArea.value);
});

const onScroll = debounce((e) => {
  emit("onScroll", e);
}, 100);

defineExpose({
  safeArea: safeArea.value,
});
</script>

<template>
  <view class="container" :style="{ background: bgColor }">
    <view class="bg" v-if="$slots.bg">
      <slot name="bg"></slot>
    </view>
    <view
      class="title"
      :style="{
        paddingTop: `${safeArea.top}px`,
        background: headerColor,
      }"
      v-if="showTitle"
    >
      <uni-nav-bar
        :left-icon="showBack ? 'left' : ''"
        @clickLeft="onBack"
        :border="border"
        :title="title"
        fixed
        :backgroundColor="headerColor"
      />
    </view>
    <scroll-view
      enable-flex
      show-scrollbar
      enable-back-to-top
      scroll-with-animation
      scroll-anchoring
      :scroll-x="scrollX"
      :scroll-y="scrollY"
      :scroll-top="scrollTop"
      @scroll="onScroll"
      v-if="!empty"
    >
      <view
        :class="['scroll-view', scrollX ? 'topic-scroll' : '']"
        :style="{
          height: `calc(100vh - ${
            menuButtonInfo.top +
            menuButtonInfo.height +
            40
          }px - env(safe-area-inset-bottom))`,
          whiteSpace: scrollX ? 'nowrap' : 'normal',
          ...scrollStyle,
        }"
      >
        <slot></slot>
      </view>
      <!-- 底部文字 -->
      <view v-if="showBottom && bottomText" class="bottom-text">
        {{ bottomText }}
      </view>
    </scroll-view>
    <view class="empty" v-else>
      <Empty v-bind="$attrs" />
    </view>
    <slot name="stick"></slot>
    <view
      v-if="$slots.footer"
      class="bottom-button"
      :style="{
        width: `${safeArea.width}px`,
        background: bottomBgColor,
        borderTop: bottomBorder ? '1px solid #eee' : 'none',
      }"
    >
      <slot name="footer" :footer-height="footerHeight" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "@/uni.scss";

.title {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.bg {
  position: absolute;
  top: 0;
}

.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.container {
  display: flex;
  flex-direction: column;
  color: #333;
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.scroll-view {
  position: relative;
  padding: 24rpx;
  box-sizing: content-box;
}

.bottom-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.bottom-button {
  width: 100%;
  padding: 24rpx;
  position: absolute;
  bottom: 0;
}

.topic-scroll {
  white-space: nowrap;
  display: inline-flex;
}
</style>