components/Container/Container.vue

@@ -1,10 +1,10 @@
 <script setup>
 import Empty from "../Empty/Empty.vue";
+import pages from "@/pages.json";
 import { ref, onMounted, watchEffect } from "vue";
-import { router, getRoute } from "../../utils/router";
+import { getRoute, router } from "../../utils/router";
 import { getRect, debounce } from "../../utils";
 import { getCurrentInstance } from "vue";
-import pages from "@/pages.json";
 
 const props = defineProps({
   showBottom: {
@@ -93,21 +93,7 @@ const safeArea = ref({
 });
 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 = {
@@ -117,24 +103,19 @@ onMounted(() => {
 
   // 解决部分安卓手机安全顶部为0 的bug
   if (!safeArea.value.top) {
-    safeArea.value.top = systemInfo.statusBarHeight;
+    safeArea.value.top = systemInfo.statusBarHeight || 40;
   }
 
   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;
-  }
-
-  if (props.scrollStyle?.padding === void 0) {
-    // 24是内边距
-    safeArea.value.width -= 24;
+  if (isTarbarPage) {
+    // 高度再减掉tabbar高度
+    safeArea.value.height -= 48;
   }
+  // 24是内边距
+  safeArea.value.width -= 24;
 
   const instance = getCurrentInstance();
   // 获取头部高度
@@ -142,7 +123,9 @@ onMounted(() => {
     name: ".title",
     onSuccess(res) {
       safeArea.value.title = res;
-      console.log(safeArea.value.title);
+      safeArea.value.height -= props.showTitle
+        ? safeArea.value.title?.height
+        : 0;
     },
     instance,
   });
@@ -150,7 +133,11 @@ onMounted(() => {
   getRect({
     name: ".bottom-button",
     onSuccess(res) {
+      console.log(res);
+
       safeArea.value.footer = res;
+      safeArea.value.height -= safeArea.value.footer?.height;
+      safeArea.value.height += 22; // 剩余高度
     },
     instance,
   });
@@ -193,7 +180,7 @@ defineExpose({
     </view>
     <scroll-view
       enable-flex
-      :show-scrollbar="false"
+      show-scrollbar
       enable-back-to-top
       scroll-with-animation
       scroll-anchoring
@@ -201,19 +188,18 @@ defineExpose({
       :scroll-y="scrollY"
       :scroll-top="scrollTop"
       @scroll="onScroll"
-      :class="['scroll-view', scrollX ? 'topic-scroll' : '']"
-      :style="{
-        height: `calc(${
-          safeArea.height - safeArea.top - safeArea.title?.height - 100
-        }px - env(safe-area-inset-bottom))`,
-        width: safeArea.width + 'px',
-        whiteSpace: scrollX ? 'nowrap' : 'normal',
-        flex: 1,
-        ...scrollStyle,
-      }"
       v-if="!empty"
     >
-      <slot></slot>
+      <view
+        :class="['scroll-view', scrollX ? 'topic-scroll' : '']"
+        :style="{
+          height: `${safeArea.height}px`,
+          whiteSpace: scrollX ? 'nowrap' : 'normal',
+          ...scrollStyle,
+        }"
+      >
+        <slot></slot>
+      </view>
       <!-- 底部文字 -->
       <view v-if="showBottom && bottomText" class="bottom-text">
         {{ bottomText }}
@@ -239,11 +225,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 @import "@/uni.scss";
-scroll-view ::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  background-color: transparent;
-}
+
 .title {
   position: sticky;
   top: 0;
@@ -263,7 +245,7 @@ scroll-view ::-webkit-scrollbar {
 }
 
 .container {
-  display: flex;
+  display: gird;
   flex-direction: column;
   color: #333;
   box-sizing: content-box;
@@ -274,8 +256,11 @@ scroll-view ::-webkit-scrollbar {
 
 .scroll-view {
   position: relative;
-  padding: 24rpx;
+  padding: 24rpx 24rpx 0;
   box-sizing: content-box;
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
 }
 
 .bottom-text {
@@ -296,4 +281,4 @@ scroll-view ::-webkit-scrollbar {
   white-space: nowrap;
   display: inline-flex;
 }
-</style>
+</style>

components/Topic/TopicExam.vue

@@ -14,7 +14,6 @@
       class="topic-item"
       :style="{
         width: `${safeArea.width}px`,
-        height: `${safeArea.height}px`,
         flexShrink: 0, // 解决宽度无效问题
       }"
     >
@@ -425,7 +424,7 @@ const onSafeAreaChange = (s) => {
   display: flex;
   flex-direction: column;
   gap: 20rpx;
-  padding: 20rpx;
+  // padding: 20rpx;
 }
 .title {
   display: flex;