考试结果

src/project/qujing/AppLegalLearning/testForm.vue

@@ -1,21 +1,24 @@
 <template>
   <div class="testForm">
     <u-navbar title="法治学习" :background="backgroundNavbar"></u-navbar>
-    <div class="type">
-      <div class="type_left">单选题</div>
-      <div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
-    </div>
-    <div class="topic">
-      <div v-for="(item,index) in questionList" :key="index">
-        <div v-if="activeIndex === index">
-          <div>{{ item.subject }}</div>
-          <div>
-            
+    <div @touchstart="touchStart" @touchend="touchEnd">
+      <div class="type">
+        <div class="type_left">单选题</div>
+        <div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
+      </div>
+      <div class="topic">
+        <div v-for="(item,index) in questionList" :key="index" >
+          <div v-if="activeIndex === index">
+            <div>{{ item.subject }}</div>
+            <div>
+
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="btn" @click="next" v-if="activeIndex < questionList.length - 1">下一题</div>
+    <!-- <div class="btn" @click="next" v-if="activeIndex < questionList.length - 1">下一题</div> -->
+    <div class="btn" @click="confirm">确定</div>
   </div>
 </template>
 
@@ -25,10 +28,10 @@ export default {
   data() {
     return {
       backgroundNavbar: {
-        background: "url('./img/navbar.png') no-repeat",
-        backgroundSize: '100% 100%',
+        // background: "url('./img/navbar.png') no-repeat",
+        // backgroundSize: '100% 100%',
       },
-      activeIndex: 0,
+      
       options: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
       questionList: [
         {
@@ -61,7 +64,11 @@ export default {
           answer: "答案",
           jiexi: '解析'
         }
-      ]
+      ],
+      startX: 0, // 滑动开始x轴位置
+      moveX: 0, // 滑动的x轴距离
+      activeIndex: 0, // 当前第几题
+      newIndex: 0, // 滑动到第几题
     }
   },
   methods: {
@@ -71,8 +78,29 @@ export default {
     next() {
       this.activeIndex ++;
     },
-    touchStart() {},
-    touchEnd() {},
+    touchStart(e) {
+      this.startX = e.changedTouches[0].pageX
+      console.log('开始触摸：', this.startX);
+    },
+    touchEnd(e, index) { // 手指离开屏幕时触发
+      // 获取滑动距离
+      const moveX = e.changedTouches[0].pageX - this.startX
+      // 判断滑动方向
+      if (moveX < -100 && index < this.topic.length-1) {
+        // 【下一题】 判断大幅度左滑且不是最后一题
+          this.newIndex=this.newIndex+1
+          this.activeIndex= this.activeIndex+1
+          console.log('第'+this.index+'题');
+      }
+      else if (moveX > 100 && index!= 0) { 
+          // 【上一题】 判断大幅度右滑且不是第一题
+          this.newIndex=this.newIndex-1
+          this.activeIndex=this.activeIndex-1
+      }
+    },
+    confirm() {
+      uni.navigateTo({url: './result'})
+    },
   },
   onReachBottom() {
     this.current ++;