feat: 完成响应式布局

components/Container/Container.vue

@@ -12,16 +12,14 @@
         :left-icon="showBack ? 'arrow-left' : ''"
         @clickLeft="onBack"
         :border="false"
-        title="导航栏组件"
+        :title="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"
@@ -30,15 +28,18 @@
       :show-scrollbar="false"
       :scroll-x="scrollX"
       :scroll-into-view="scrollIntoView"
-      :style="{
-        // 24是内边距
-        // width: `${safeArea.width}px`,
-        // 减去底部高度
-        height: `${safeArea.height}px`,
-        whiteSpace: scrollX ? 'nowrap' : 'normal',
-      }"
+      enable-back-to-top
+      scroll-anchoring
     >
-      <slot></slot>
+      <view
+        :class="['scroll-view', scrollX ? 'topic-scroll' : '']"
+        :style="{
+          height: `${safeArea.height}px`,
+          whiteSpace: scrollX ? 'nowrap' : 'normal',
+        }"
+      >
+        <slot></slot>
+      </view>
       <!-- 底部文字 -->
       <view v-if="showBottom && bottomText" class="bottom-text">
         {{ bottomText }}
@@ -57,8 +58,9 @@
 </template>
 
 <script setup>
+import pages from '@/pages.json'
 import { ref, onMounted, watchEffect } from "vue";
-import { router } from "../../utils/router";
+import { getRoute, router } from "../../utils/router";
 import { getRect } from "../../utils/utils";
 import { getCurrentInstance } from "vue";
 
@@ -104,6 +106,7 @@ const props = defineProps({
     type: String,
     default: "#fff",
   },
+  title: String
 });
 
 const emit = defineEmits(["onSafeAreaChange"]);
@@ -124,8 +127,19 @@ const safeArea = ref({
 const footerHeight = ref(0);
 
 onMounted(() => {
-  const systemInfo = uni.getSystemInfoSync();
-  safeArea.value = systemInfo.safeArea;
+  const systemInfo = uni.getWindowInfo();
+  // 判断是否为tabbar页面
+  safeArea.value = {
+    ...systemInfo.safeArea,
+    source: systemInfo.safeArea,
+  };
+  const isTarbarPage = pages.tabBar.list.map(item => item.pagePath).includes(getRoute().routeList[0].path)
+  if (isTarbarPage) {
+    // 高度再减掉tabbar高度
+    safeArea.value.height -= 50;
+    // 减去系统导航栏高度
+    safeArea.value.height -= (systemInfo.statusBarHeight - 18);
+  }
   // 24是内边距
   safeArea.value.width -= 24;
 
@@ -155,7 +169,6 @@ onMounted(() => {
 
 watchEffect(() => {
   emit("onSafeAreaChange", safeArea.value);
-  console.log(safeArea.value);
 });
 
 defineExpose({

components/Topic/Topic.vue

@@ -4,17 +4,18 @@ view
     :scrollX="true"
     :scrollY="false"
     :scroll-into-view="`item-${nowIndex}`"
+    :title="title"
     @onSafeAreaChange="onSafeAreaChange"
   >
     <template v-for="(item, parindex) in topics.ques" :key="parindex">
       <view
         :id="`item-${parindex}`"
+        v-if="parindex === nowIndex"
         class="topic-item"
         :style="{
           width: `${safeArea.width}px`,
           height: `${safeArea.height}px`,
           flexShrink: 0, // 解决宽度无效问题
-          marginLeft: parindex !== 0 ? `${24}rpx` : `0` 
         }"
       >
         <!-- 头部 -->
@@ -123,6 +124,7 @@ const props = defineProps({
     type: String,
     default: "practice", // practice: 练习模式, exam: 考试模式
   },
+  title: String
 });
 
 // Emits 定义

pages.json

@@ -1,18 +1,69 @@
 {
-	"pages": [{
-		"path": "pages/index/index",
-		"style": {
-			"navigationBarTitleText": "uni-app",
-			"navigationStyle": "custom"
-		}
-	}],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8",
-		"app-plus": {
-			"background": "#efeff4"
-		}
+  "pages": [
+    {
+      "path": "pages/home/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+	{
+	  "path": "pages/learn/index",
+	  "style": {
+	    "navigationStyle": "custom"
+	  }
+	},
+	{
+	  "path": "pages/challenge/index",
+	  "style": {
+	    "navigationStyle": "custom"
+	  }
+	},
+	{
+	  "path": "pages/mine/index",
+	  "style": {
+	    "navigationStyle": "custom"
+	  }
 	}
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8",
+    "app-plus": {
+      "background": "#efeff4"
+    }
+  },
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#3cc51f",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/home/index",
+        "iconPath": "static/icons/c1.png",
+        "selectedIconPath": "static/icons/c2.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/learn/index",
+        "iconPath": "static/icons/c1.png",
+        "selectedIconPath": "static/icons/c2.png",
+        "text": "学习本"
+      },
+      {
+        "pagePath": "pages/challenge/index",
+        "iconPath": "static/icons/c1.png",
+        "selectedIconPath": "static/icons/c2.png",
+        "text": "挑战"
+      },
+      {
+        "pagePath": "pages/mine/index",
+        "iconPath": "static/icons/c1.png",
+        "selectedIconPath": "static/icons/c2.png",
+        "text": "我的"
+      }
+    ]
+  }
 }

pages/home/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <Container title="首页" :showBack="false">
+    <view class="home">
+      <view class="time">
+        <view>倒计时</view>
+        <view>151天</view>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<script setup lang="ts">
+import Container from "../../components/Container/Container.vue";
+</script>
+
+<style scoped lang="scss">
+.home {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+
+  .time {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 80rpx;
+  }
+}
+</style>

pages/learn/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <Topic :topics="list" mode="practice" @answerChange="answerChange"></Topic>
+</template>
+
+<script setup>
+import Topic from "@/components/Topic/Topic.vue";
+const list = {
+  ques: [
+    {
+      id: 1,
+      title: "测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目",
+      questions: [
+        { label: "测试1", value: 1 },
+        { label: "测试2", value: 2 },
+        { label: "测试3", value: 3 },
+        { label: "测试4", value: 4 },
+        { label: "测试5", value: 5 },
+      ],
+      anslist: [2],
+    },
+    {
+      id: 2,
+      title: "测试题目",
+      questions: [
+        { label: "测试1", value: 1 },
+        { label: "测试2", value: 2 },
+        { label: "测试3", value: 3 },
+        { label: "测试4", value: 4 },
+        { label: "测试5", value: 5 },
+      ],
+      anslist: [2, 4],
+    },
+
+    {
+      id: 3,
+      title: "测试题目",
+			mode: '综合分析题',
+      questions: [
+        { label: "测试1", value: 1 },
+        { label: "测试2", value: 2 },
+        { label: "测试3", value: 3 },
+        { label: "测试4", value: 4 },
+        { label: "测试5", value: 5 },
+      ],
+      anslist: [2, 3],
+    },
+  ],
+};
+
+const answerChange = (item) => {
+  console.log(item);
+};
+</script>
+
+<style></style>

pages/mine/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <Topic :topics="list" mode="practice" @answerChange="answerChange"></Topic>
+</template>
+
+<script setup>
+import Topic from "@/components/Topic/Topic.vue";
+const list = {
+  ques: [
+    {
+      id: 1,
+      title: "测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目测试题目",
+      questions: [
+        { label: "测试1", value: 1 },
+        { label: "测试2", value: 2 },
+        { label: "测试3", value: 3 },
+        { label: "测试4", value: 4 },
+        { label: "测试5", value: 5 },
+      ],
+      anslist: [2],
+    },
+    {
+      id: 2,
+      title: "测试题目",
+      questions: [
+        { label: "测试1", value: 1 },
+        { label: "测试2", value: 2 },
+        { label: "测试3", value: 3 },
+        { label: "测试4", value: 4 },
+        { label: "测试5", value: 5 },
+      ],
+      anslist: [2, 4],
+    },
+
+    {
+      id: 3,
+      title: "测试题目",
+			mode: '综合分析题',
+      questions: [
+        { label: "测试1", value: 1 },
+        { label: "测试2", value: 2 },
+        { label: "测试3", value: 3 },
+        { label: "测试4", value: 4 },
+        { label: "测试5", value: 5 },
+      ],
+      anslist: [2, 3],
+    },
+  ],
+};
+
+const answerChange = (item) => {
+  console.log(item);
+};
+</script>
+
+<style></style>