exam_mp/components/Container/Container.vue

<template>
  <view class="container">
    <view
      class="title"
      :style="{
        paddingTop: `${safeArea.top}px`,
        background: bgColor,
      }"
      v-if="showTitle"
    >
      <uni-nav-bar
        :left-icon="showBack ? 'arrow-left' : ''"
        @clickLeft="onBack"
        :border="false"
        title="导航栏组件"
        fixed
        :backgroundColor="bgColor"
      />
    </view>
    <scroll-view
      :class="['scroll-view', scrollX ? 'topic-scroll' : '']"
      :scroll-y="scrollY"
      :scroll-with-animation="true"
      :scroll-into-view-within-extent="true"
      :enable-flex="true"
      :enable-passive="true"
      :enhanced="true"
      :paging-enabled="true"
      :scroll-anchoring="true"
      :show-scrollbar="false"
      :scroll-x="scrollX"
      :scroll-into-view="scrollIntoView"
      :style="{
        // 24是内边距
        // width: `${safeArea.width}px`,
        // 减去底部高度
        height: `${safeArea.height}px`,
        whiteSpace: scrollX ? 'nowrap' : 'normal',
      }"
    >
      <slot></slot>
      <!-- 底部文字 -->
      <view v-if="showBottom && bottomText" class="bottom-text">
        {{ bottomText }}
      </view>
    </scroll-view>
    <view
      class="bottom-button"
      :style="{
        width: `${safeArea.width}px`,
        background: bgColor,
      }"
    >
      <slot name="footer" :footer-height="footerHeight"></slot>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watchEffect } from "vue";
import { router } from "../../utils/router";
import { getRect } from "../../utils/utils";
import { getCurrentInstance } from "vue";

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: "",
  },
  style: {
    type: [String, Object],
    default: "",
  },
  onBack: Function,
  showBack: {
    type: Boolean,
    default: true,
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  bgColor: {
    type: String,
    default: "#fff",
  },
});

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

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

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

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  safeArea.value = systemInfo.safeArea;
  // 24是内边距
  safeArea.value.width -= 24;

  const instance = getCurrentInstance();
  // 获取头部高度
  getRect({
    name: ".title",
    onSuccess(res) {
      safeArea.value.title = res;
      safeArea.value.height -= props.showTitle
        ? 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);
  console.log(safeArea.value);
});

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

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

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

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

.scroll-view {
  position: relative;
  padding: 24rpx 24rpx 0;
  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>