Pārlūkot izejas kodu

优化uv-tabs滚动逻辑

shmily1213 1 mēnesi atpakaļ
vecāks
revīzija
558f07a187

+ 8 - 4
src/composables/useExam.ts

@@ -482,7 +482,7 @@ export const useExam = () => {
     answer1 = answer1 || '';
     answer2 = answer2 || '';
     if ([EnumQuestionType.SINGLE_CHOICE, EnumQuestionType.JUDGMENT].includes(typeId)) {
-      return answer1?.trim() === answers[0];
+      return answer1.trim() === answers[0];
     } else if ([EnumQuestionType.MULTIPLE_CHOICE].includes(typeId)) {
       return answers.length === answer1.length && answers.every(item => answer1.includes(item));
     } else {
@@ -528,7 +528,9 @@ export const useExam = () => {
     if (currentQuestion.value.activeSubIndex < currentQuestion.value.subQuestions.length - 1) {
       currentQuestion.value.activeSubIndex++;
     } else {
-      currentIndex.value++;
+      const lastIndex = currentIndex.value + 1;
+      questionList.value[lastIndex].activeSubIndex = 0;
+      currentIndex.value = lastIndex;
     }
   }
   // 上一题
@@ -540,7 +542,9 @@ export const useExam = () => {
       if (currentQuestion.value.activeSubIndex > 0) {
         currentQuestion.value.activeSubIndex--;
       } else {
-        currentIndex.value--;
+        const prevIndex = currentIndex.value - 1;
+        questionList.value[prevIndex].activeSubIndex = questionList.value[prevIndex].subQuestions.length - 1;
+        currentIndex.value = prevIndex;
       }
     } else {
       if (currentIndex.value > 0) {
@@ -746,7 +750,7 @@ export const useExam = () => {
         virtualIndex: 0,
         duration: 0,
         activeSubIndex: 0,
-        hasSubQuestions: item.subQuestions?.length > 0,
+        hasSubQuestions: item.subQuestions && item.subQuestions?.length > 0,
         typeTitle: item.typeTitle
       } as Study.Question
     }

+ 1 - 1
src/pagesOther/pages/vocation-library/detail/components/vocation-overview.vue

@@ -86,7 +86,7 @@ const goPostInfo = async (post) => {
     scrollTop.value = 0
 }
 const goVocation = (vocation) => {
-    transferTo('/pages/vocation-library/detail/detail', ['code'], vocation)
+    transferTo('/pagesOther/pages/vocation-library/detail/detail', ['code'], vocation)
 }
 const goMajor = (major) => {
     transferTo('/pagesOther/pages/major-library/detail/detail', ['code', 'name'], major)

+ 9 - 9
src/pagesStudy/pages/exam-start/components/question-item.vue

@@ -8,7 +8,7 @@
     </template>
     <view v-else class="mt-20">
       <uv-tabs ref="tabRef" :current="question.activeSubIndex" :autoScroll="autoScroll" keyName="label"
-        :animationEnabled="false" :itemStyle="tabItemStyle" :list="tabs" :scrollable="true" lineHeight="0"
+        :animationEnabled="true" :itemStyle="tabItemStyle" :list="tabs" :scrollable="true" lineHeight="0"
         @change="handleTabChange">
         <template #default="{ item, index }">
           <view class="px-40 py-8 rounded-full"
@@ -17,8 +17,10 @@
           </view>
         </template>
       </uv-tabs>
-      <view v-if="question.subQuestions[question.activeSubIndex]" class="mt-20">
-        <question-item :question="question.subQuestions[question.activeSubIndex]" />
+      <view v-if="question.subQuestions.length" class="mt-20">
+        <view v-for="subQuestion in question.subQuestions" :key="subQuestion.subIndex">
+          <question-item v-show="subQuestion.subIndex === question.activeSubIndex" :question="subQuestion" />
+        </view>
       </view>
     </view>
   </view>
@@ -65,12 +67,10 @@ watch(() => props.question.activeSubIndex, (val) => {
   immediate: false
 });
 watch(() => currentIndex.value, (val) => {
-  if (currentIndex.value === props.question.index) {
-    setTimeout(() => {
-      nextTick(() => {
-        tabRef.value?.init();
-      });
-    }, 0);
+  if (currentIndex.value === props.question.index && props.question.hasSubQuestions) {
+    nextTick(() => {
+      tabRef.value?.init();
+    });
   } else {
     autoScroll.value = false;
   }

+ 1 - 1
src/pagesStudy/pages/exam-start/components/question-parse.vue

@@ -1,7 +1,7 @@
 <template>
   <view v-if="(isReadOnly) || (!isReadOnly && question.showParse)" class="mt-40">
     <!-- 主观题的答案在这里显示,其他题型在 question-result 面板显示 -->
-    <view v-if="isOnlySubjective" class="mb-20">
+    <view class="mb-20">
       <view class="text-30 text-fore-title font-bold">答案</view>
       <view class="mt-10 text-26 text-fore-light">
         <mp-html :content="decodeHtmlEntities(question.answer2 || '略')" />

+ 1 - 1
src/pagesStudy/pages/exam-start/components/question-title.vue

@@ -48,7 +48,7 @@ const getScore = computed(() => {
 });
 const getQuestionTitle = () => {
   if (isSubQuestion.value) {
-    const prefix = questionTypeDesc[props.question.typeId as EnumQuestionType].slice(0, 2);
+    const prefix = questionTypeDesc[props.question.typeId as EnumQuestionType].slice(0, 3);
     return `[${props.question.typeTitle || prefix}]`;
   }
   return '';

+ 3 - 1
src/pagesStudy/pages/exam-start/exam-start.vue

@@ -411,7 +411,9 @@ const handleSwiperTipNext = () => {
 }
 const handleGuideClose = () => {
   userStore.isExamGuideShow = true;
-  startTime();
+  if (!isReadOnly.value) {
+    startTime();
+  }
 }
 const loadData = async () => {
   uni.$ie.showLoading();

+ 4 - 3
src/uni_modules/uv-tabs/components/uv-tabs/uv-tabs.vue

@@ -138,7 +138,7 @@
 				immediate: true,
 				handler (newValue, oldValue) {
 					// 内外部值不相等时,才尝试移动滑块
-					if (this.autoScroll && newValue !== this.innerCurrent) {
+					if (newValue !== this.innerCurrent) {
 						this.innerCurrent = newValue
 						this.$nextTick(() => {
 							this.resize()
@@ -266,8 +266,9 @@
 				// 此处为屏幕宽度
 				const windowWidth = this.$uv.sys().windowWidth
 				// 将活动的tabs-item移动到屏幕正中间,实际上是对scroll-view的移动
-				let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
-					.right) / 2 + this.tabsRect.left / 2
+				// let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
+				// 	.right) / 2 + this.tabsRect.left / 2
+        let scrollLeft = offsetLeft + tabRect.rect.width / 2 - this.tabsRect.width / 2;
 				// 这里做一个限制,限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
 				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
 				this.scrollLeft = Math.max(0, scrollLeft)