优化

pages/YNEduApp/exam/examination.vue

@@ -1,7 +1,7 @@
 <template>
   <view>
     <u-navbar leftIcon="" title="考试" :placeholder="true" />
-    <div class="content">
+    <div class="content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
       <div class="top-content">
         <div class="top-wrapper">
           <div class="time">
@@ -96,7 +96,7 @@
         <div class="btn" v-if="currentIndex !== questionList.length - 1">
           <u-button type="primary" size="small" shape="circle" text="下一题" @click="currentIndex++" />
         </div>
-        <div class="btn" v-else>
+        <div class="btn">
           <u-button type="primary" size="small" shape="circle" text="交 卷" @click="openConfirmModal" />
         </div>
       </div>
@@ -172,7 +172,9 @@ export default {
       score: 0,
       passScore: 0,
       isHide: false,
-      failCount: 3
+      failCount: 3,
+      startX: 0, // 起始触摸点X坐标
+      endX: 0 // 结束触摸点X坐标
     }
   },
   onLoad(opt) {
@@ -275,15 +277,15 @@ export default {
       this.answerTime =
         this.time - (time.days * 24 * 60 * 60 + time.hours * 60 * 60 + time.minutes * 60 + time.seconds) * 1000
       // console.log('🚀 ~ changeCountDown ~ this.answerTime:', this.answerTime)
-      console.log(
+      // console.log(
-        '🚀 ~ changeCountDown ~ this.answerTime:',
+      //   '🚀 ~ changeCountDown ~ this.answerTime:',
-        this.time,
+      //   this.time,
-        this.answerTime / 1000,
+      //   this.answerTime / 1000,
-        this.random1,
+      //   this.random1,
-        this.random2
+      //   this.random2
-      )
+      // )
-      console.log('🚀 ~ changeCountDown ~:', this.answerTime / 1000 == this.random1)
+      // console.log('🚀 ~ changeCountDown ~:', this.answerTime / 1000 == this.random1)
-      console.log('🚀 ~ changeCountDown ~:', this.answerTime / 1000 == this.random2)
+      // console.log('🚀 ~ changeCountDown ~:', this.answerTime / 1000 == this.random2)
       if (this.answerTime / 1000 == this.random1) {
         console.log('🚀 ~ changeCountDown ~ 人脸识别')
         // this.openFaceScan() // Android 人脸识别
@@ -579,6 +581,37 @@ export default {
           console.log(err)
         }
       })
+    },
+    touchStart(event) {
+      this.startX = 0
+      this.endX = 0
+      console.log('🚀 ~ 开始 ~ event:', event)
+      // 记录触摸开始的位置
+      this.startX = event.touches[0].clientX
+      console.log('🚀 ~ touchStart ~ this.startX:', this.startX)
+    },
+    touchMove(event) {
+      console.log('🚀 ~ 移动 ~ event:', event)
+      // 在触摸过程中可以获取当前触摸点位置
+      this.endX = event.touches[0].clientX
+      console.log('🚀 ~ touchMove ~ this.endX:', this.endX)
+    },
+    touchEnd() {
+      // 判断滑动方向
+      if (this.startX != 0 && this.endX != 0 && this.startX - this.endX > 10) {
+        // 左滑
+        console.log('向左滑动')
+        this.currentIndex++
+      } else if (this.startX != 0 && this.endX != 0 && this.endX - this.startX > 10) {
+        // 右滑
+        console.log('向右滑动')
+        this.currentIndex--
+      }
+      if (this.currentIndex < 0) {
+        this.currentIndex = 0
+      } else if (this.currentIndex > this.questionList.length - 1) {
+        this.currentIndex = this.questionList.length - 1
+      }
     }
   },
   onBackPress(options) {
@@ -598,7 +631,8 @@ export default {
 
 <style lang="scss" scoped>
 .content {
-  padding: 10px;
+  width: 100vw;
+  height: 90vh;
 
   .top-content {
     background: #fff;
@@ -662,6 +696,7 @@ export default {
   }
 
   .question-wrapper {
+    padding: 10px;
     .question-type-wrapper {
       margin: 20px 0;
       display: flex;

pages/YNEduApp/prac/exercises.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="wrapper">
+  <view class="wrapper" >
     <div class="top-time">已用时间 {{ usedTime }}</div>
     <div class="num-wrapper">
       <div class="correct">
@@ -16,7 +16,7 @@
       </div>
     </div>
 
-    <div class="question-wrapper" v-for="(item, index) in questionList" :key="index">
+    <div class="question-wrapper" v-for="(item, index) in questionList" :key="index" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
       <div v-if="item.examType != 2">
         <div class="title">{{ nowNum }}.{{ item.paperTopic }}{{ item.examType == 1 ? '（单选题）' : '(判断题)' }}</div>
         <u--image
@@ -262,7 +262,9 @@ export default {
       studyId: '', // 学习id
       fileUrl: config.fileUrl,
       intervalId: '',
-      isEnd: false
+      isEnd: false,
+      startX: 0, // 起始触摸点X坐标
+      endX: 0 // 结束触摸点X坐标
     }
   },
   onLoad(opt) {
@@ -391,8 +393,16 @@ export default {
       console.log('🚀 ~ handleJump ~ item:', item, this.recordId)
       if (item === 'prev') {
         this.nowNum--
+        if (this.nowNum < 1) {
+          this.nowNum = 1
+          return
+        }
       } else if (item === 'next') {
         this.nowNum++
+        if (this.nowNum > this.allNum) {
+          this.nowNum = this.allNum
+          return
+        }
       } else if (item === 'jump') {
         this.nowNum = index
       }
@@ -831,6 +841,32 @@ export default {
           console.log(err)
         }
       })
+    },
+    touchStart(event) {
+      this.startX = 0
+      this.endX = 0
+      console.log('🚀 ~ 开始 ~ event:', event)
+      // 记录触摸开始的位置
+      this.startX = event.touches[0].clientX
+      console.log('🚀 ~ touchStart ~ this.startX:', this.startX)
+    },
+    touchMove(event) {
+      console.log('🚀 ~ 移动 ~ event:', event)
+      // 在触摸过程中可以获取当前触摸点位置
+      this.endX = event.touches[0].clientX
+      console.log('🚀 ~ touchMove ~ this.endX:', this.endX)
+    },
+    touchEnd() {
+      // 判断滑动方向
+      if (this.startX != 0 && this.endX != 0 && this.startX - this.endX > 10) {
+        // 左滑
+        console.log('向左滑动')
+        this.handleJump('next')
+      } else if (this.startX != 0 && this.endX != 0 && this.endX - this.startX > 10) {
+        // 右滑
+        console.log('向右滑动')
+        this.handleJump('prev')
+      }
     }
   },
   onBackPress(options) {
@@ -949,7 +985,7 @@ export default {
   }
 
   .question-wrapper {
-    max-height: 500px;
+    height: 500px;
     overflow: auto;
     padding: 30px;
     color: #08428d;