新增触摸题目序号增加的功能,未完成

src/components/m-exercise/index.vue

@@ -1,131 +1,133 @@
 <template>
-	<!-- 导航栏 -->
-	<van-nav-bar :title="exerciseTitle" class="custom-title" left-arrow @click-left="back" fixed placeholder>
-		<template #right>
-			<m-icon type="shezhi" @click="setShow = true" />
-		</template>
-	</van-nav-bar>
-	<!-- 导航栏end -->
-	<!-- 答题模式选择 -->
-	<div class="answerType">
-		<span v-for="(answerType, index) in answerTypeList" :key="index" :class="{ selected: currentType == index }" @click="currentType = index">{{ answerType.name }}</span>
-		<span v-if="isVip" :class="{ selected: aotuPlayFlag }" @click="aotuPlaySet">自动读题</span>
-		<!-- 不是vip隐藏自动读题 -->
-		<span v-else class="visibility-hidden" :class="{ selected: aotuPlayFlag }">自动读题</span>
-	</div>
-	<!-- 答题模式选择end -->
-	<!-- 分割线 -->
-	<div class="divider" />
-	<!-- 题目模块 -->
-	<!-- 题目预加载 -->
-	<m-empty v-if="!currentSubject" />
-	<!-- 题目预加载end -->
-	<div class="problem-box" v-else>
-		<!-- 题目内容 -->
-		<subjectContext :currentSubject="currentSubject" :currentSubjectIndex="currentSubjectIndex" />
-		<!-- 背题模式展示 -->
-		<div v-if="typeParams.answerShow">
-			<reciteMode :currentSubject="currentSubject" />
+	<div @touchstart='touchstart' @touchmove='touchmove'>
+
+
+		<!-- 导航栏 -->
+		<van-nav-bar :title="exerciseTitle" class="custom-title" left-arrow @click-left="back" fixed placeholder>
+			<template #right>
+				<m-icon type="shezhi" @click="setShow = true" />
+			</template>
+		</van-nav-bar>
+		<!-- 导航栏end -->
+		<!-- 答题模式选择 -->
+		<div class="answerType">
+			<span v-for="(answerType, index) in answerTypeList" :key="index" :class="{ selected: currentType == index }"
+				@click="currentType = index">{{ answerType.name }}</span>
+			<span v-if="isVip" :class="{ selected: aotuPlayFlag }" @click="aotuPlaySet">自动读题</span>
+			<!-- 不是vip隐藏自动读题 -->
+			<span v-else class="visibility-hidden" :class="{ selected: aotuPlayFlag }">自动读题</span>
 		</div>
-		<!-- 背题模式展示end -->
-		<!-- 选择内容 -->
-		<div v-else-if="currentSubject.isTrue === null">
-			<!-- 单选 -->
-			<van-radio-group v-model="currentSubject.userAnswer" v-if="currentSubject.questionType !== 3" @change="userAnswerChange" icon-size="35px">
-				<van-radio v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
-					>{{ item }}
-					<template #icon="props">
-						<div class="choose-icon" :class="{ selected: props.checked }">
-							{{ String.fromCharCode(65 + Number(index)) }}
-						</div>
-					</template>
-				</van-radio>
-			</van-radio-group>
-			<!-- 多选 -->
-			<div v-else>
-				<van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
-					<van-checkbox v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
-						>{{ item }}
+		<!-- 答题模式选择end -->
+		<!-- 分割线 -->
+		<div class="divider" />
+		<!-- 题目模块 -->
+		<!-- 题目预加载 -->
+		<m-empty v-if="!currentSubject" />
+		<!-- 题目预加载end -->
+		<div class="problem-box" v-else>
+			<!-- 题目内容 -->
+			<subjectContext :currentSubject="currentSubject" :currentSubjectIndex="currentSubjectIndex" />
+			<!-- 背题模式展示 -->
+			<div v-if="typeParams.answerShow">
+				<reciteMode :currentSubject="currentSubject" />
+			</div>
+			<!-- 背题模式展示end -->
+			<!-- 选择内容 -->
+			<div v-else-if="currentSubject.isTrue === null">
+				<!-- 单选 -->
+				<van-radio-group v-model="currentSubject.userAnswer" v-if="currentSubject.questionType !== 3"
+					@change="userAnswerChange" icon-size="35px">
+					<van-radio v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item"
+						class="answer">{{ item }}
 						<template #icon="props">
 							<div class="choose-icon" :class="{ selected: props.checked }">
 								{{ String.fromCharCode(65 + Number(index)) }}
 							</div>
 						</template>
-					</van-checkbox>
-				</van-checkbox-group>
-				<van-button round type="primary" class="checkbox-btn" @click="userAnswerChange">确定</van-button>
+					</van-radio>
+				</van-radio-group>
+				<!-- 多选 -->
+				<div v-else>
+					<van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
+						<van-checkbox v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item"
+							class="answer">{{ item }}
+							<template #icon="props">
+								<div class="choose-icon" :class="{ selected: props.checked }">
+									{{ String.fromCharCode(65 + Number(index)) }}
+								</div>
+							</template>
+						</van-checkbox>
+					</van-checkbox-group>
+					<van-button round type="primary" class="checkbox-btn" @click="userAnswerChange">确定</van-button>
+				</div>
 			</div>
-		</div>
-		<!-- 展示答题后选择内容 -->
-		<div v-else>
-			<div>
-				<div v-for="(item, index) in currentSubject.optsBack" :key="Number(index)" class="answer-box">
-					<div class="choose-icon" :class="{ iconTrue: item.status % 2 !== 0 }" v-if="item.status < 2">
-						{{ String.fromCharCode(65 + Number(index)) }}
+			<!-- 展示答题后选择内容 -->
+			<div v-else>
+				<div>
+					<div v-for="(item, index) in currentSubject.optsBack" :key="Number(index)" class="answer-box">
+						<div class="choose-icon" :class="{ iconTrue: item.status % 2 !== 0 }" v-if="item.status < 2">
+							{{ String.fromCharCode(65 + Number(index)) }}
+						</div>
+						<m-icon v-else-if="item.status == 3" type="dui" size="30px" style="margin-left: 5px" />
+						<m-icon v-else-if="item.status == 2" size="30px" type="cuo" style="margin-left: 5px" />
+						<span class="answer-text" :class="{ true: item.status % 2 !== 0, false: item.status == 2 }">
+							{{ item.opt }}
+						</span>
 					</div>
-					<m-icon v-else-if="item.status == 3" type="dui" size="30px" style="margin-left: 5px" />
-					<m-icon v-else-if="item.status == 2" size="30px" type="cuo" style="margin-left: 5px" />
-					<span class="answer-text" :class="{ true: item.status % 2 !== 0, false: item.status == 2 }">
-						{{ item.opt }}
-					</span>
 				</div>
+				<div class="checkbox-answer">答案: {{ currentSubject.answer.toString() }}</div>
 			</div>
-			<div class="checkbox-answer">答案: {{ currentSubject.answer.toString() }}</div>
+			<!-- 展示答题后选择内容end -->
 		</div>
-		<!-- 展示答题后选择内容end -->
-	</div>
-	<!-- 选择内容End -->
-	<!-- 分割线 -->
-	<van-divider />
-	<!-- 功能选择列表 -->
-	<functionList v-if="!hideFunctionList" :currentSubject="currentSubject" @subjectAudioPlay="subjectAudioPlay" @addCurrentQuestion="addCurrentQuestion" v-model:skillsShow="skillsShow" />
-	<!-- 技巧讲解 -->
-	<explainJq
-		@audioPause="
+		<!-- 选择内容End -->
+		<!-- 分割线 -->
+		<van-divider />
+		<!-- 功能选择列表 -->
+		<functionList v-if="!hideFunctionList" :currentSubject="currentSubject" @subjectAudioPlay="subjectAudioPlay"
+			@addCurrentQuestion="addCurrentQuestion" v-model:skillsShow="skillsShow" />
+		<!-- 技巧讲解 -->
+		<explainJq @audioPause="
 			() => {
 				audioPause();
 			}
-		"
-		:currentSubject="currentSubject"
-		v-model:skillsShow="skillsShow"
-		@subjectAudioPlay="subjectAudioPlay" />
-	<!-- 官方解释 -->
-	<explainJs
-		@audioPause="
+		" :currentSubject="currentSubject" v-model:skillsShow="skillsShow" @subjectAudioPlay="subjectAudioPlay" />
+		<!-- 官方解释 -->
+		<explainJs @audioPause="
 			() => {
 				audioPause();
 			}
-		"
-		:currentSubject="currentSubject"
-		v-model:officialShow="officialShow"
-		@subjectAudioPlay="subjectAudioPlay" />
-	<!-- 设置操作栏 -->
-	<van-popup v-model:show="setShow" position="bottom">
-		<van-cell center title="答对跳转下一题">
-			<template #right-icon>
-				<van-switch v-model="isJumpNext" size="24" />
-			</template>
-		</van-cell>
-		<van-cell center title="答题音效提示">
-			<template #right-icon>
-				<van-switch v-model="isSoundEffect" size="24" />
-			</template>
-		</van-cell>
-	</van-popup>
-	<!-- 设置操作栏end -->
-	<!-- 底部弹出题目选择栏 -->
-	<van-popup v-model:show="showSubjectChangePopup" position="bottom">
-		<subjectChangePopup :trueNum="trueNum" :falseNum="falseNum" v-model:currentSubjectIndex="currentSubjectIndex" :subjectList="subjectList" />
-	</van-popup>
-	<!-- 底部操作栏 -->
-	<bottomBar :audioPause="audioPause" :currentSubjectIndex="currentSubjectIndex" :subjectTotal="subjectTotal" :trueNum="trueNum" :falseNum="falseNum" v-model:showSubjectChangePopup="showSubjectChangePopup" v-model:officialShow="officialShow" @lastSubject="lastSubject" @nextSubject="nextSubject" />
+		" :currentSubject="currentSubject" v-model:officialShow="officialShow" @subjectAudioPlay="subjectAudioPlay" />
+		<!-- 设置操作栏 -->
+		<van-popup v-model:show="setShow" position="bottom">
+			<van-cell center title="答对跳转下一题">
+				<template #right-icon>
+					<van-switch v-model="isJumpNext" size="24" />
+				</template>
+			</van-cell>
+			<van-cell center title="答题音效提示">
+				<template #right-icon>
+					<van-switch v-model="isSoundEffect" size="24" />
+				</template>
+			</van-cell>
+		</van-popup>
+		<!-- 设置操作栏end -->
+		<!-- 底部弹出题目选择栏 -->
+		<van-popup v-model:show="showSubjectChangePopup" position="bottom">
+			<subjectChangePopup :trueNum="trueNum" :falseNum="falseNum" v-model:currentSubjectIndex="currentSubjectIndex"
+				:subjectList="subjectList" />
+		</van-popup>
+		<!-- 底部操作栏 -->
+		<bottomBar :audioPause="audioPause" :currentSubjectIndex="currentSubjectIndex" :subjectTotal="subjectTotal"
+			:trueNum="trueNum" :falseNum="falseNum" v-model:showSubjectChangePopup="showSubjectChangePopup"
+			v-model:officialShow="officialShow" @lastSubject="lastSubject" @nextSubject="nextSubject" />
+	</div>
 </template>
 <script lang="ts">
-import { defineComponent,defineAsyncComponent } from "vue";
+import { defineComponent, defineAsyncComponent } from "vue";
 export default defineComponent({
 	name: "mExercise",
 	components: {
-		subjectContext:defineAsyncComponent(()=>import('./components/subjectContext.vue')),
+		subjectContext: defineAsyncComponent(() => import('./components/subjectContext.vue')),
 	},
 });
 </script>
@@ -151,6 +153,40 @@ const props = defineProps<{
 	listType: ExerciseType.ListType;
 	hideFunctionList: Boolean;
 }>();
+let startX = 0
+let startY = 0
+
+let moveX = 0
+let moveY = 0
+
+let hwoLong = 1000
+const touchstart = (e: TouchEvent) => {
+	// 如果你要阻止点击事件，请反注释下一行代码
+	// e.preventDefault()
+	startX = e.touches[0].clientX
+	startY = e.touches[0].clientY
+}
+const touchmove = (e: TouchEvent) => {
+	// e.preventDefault()
+	moveX = e.touches[0].clientX
+	moveY = e.touches[0].clientY
+	startX - moveX <= 0 ? console.log('你在往右滑') : console.log('你在往左滑')
+	if (startX - moveX <= -100) { // 右滑触发
+		// do something
+		if (currentSubjectIndex.value == 0) {
+			return
+		}
+		currentSubjectIndex.value = currentSubjectIndex.value - 1
+	}
+	if (startX - moveX <= 100) { // 左滑触发
+		// do something
+		if ((subjectList.value.length - 1) == currentSubjectIndex.value) {
+			return
+		}
+		currentSubjectIndex.value = currentSubjectIndex.value + 1
+	}
+}
+
 
 const isVip = store.getters.getIsVip;
 //答题模式选择逻辑
@@ -175,13 +211,16 @@ const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet, audioPause } = useAudioSet(
 :deep(.van-ellipsis) {
 	white-space: normal;
 }
+
 .visibility-hidden {
 	visibility: hidden;
 }
+
 .parsing-img {
 	width: 100%;
 	margin-top: 10px;
 }
+
 .answerType {
 	width: 100%;
 	font-size: 13px;
@@ -189,40 +228,50 @@ const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet, audioPause } = useAudioSet(
 	justify-content: space-around;
 	padding: 15px;
 	box-sizing: border-box;
+
 	span {
 		border-radius: 20px;
 		padding: 3px 10px;
 		background-color: #b8c0cc;
 		color: #ffffff;
 	}
+
 	.selected {
 		background-color: #498ef5;
 	}
 }
+
 .divider {
 	width: 100%;
 	height: 10px;
 	background-color: #f2f3f5;
 }
+
 .problem-box {
 	font-size: 17px;
 	padding: 15px;
+
 	.answer {
 		margin-top: 25px;
 	}
+
 	.answer-box {
 		display: flex;
 		margin-top: 25px;
 		align-items: center;
+
 		.iconTrue {
 			background-color: #01c18d;
 		}
+
 		.answer-text {
 			margin-left: 10px;
 		}
+
 		.true {
 			color: #01c18d;
 		}
+
 		.false {
 			color: #ff4d53;
 		}
@@ -241,9 +290,11 @@ const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet, audioPause } = useAudioSet(
 		margin-left: 5px;
 		margin-top: 1px;
 	}
+
 	.selected {
 		background-color: #498ef5;
 	}
+
 	.checkbox-btn {
 		width: 266px;
 		height: 40px;
@@ -252,6 +303,7 @@ const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet, audioPause } = useAudioSet(
 		left: 50%;
 		transform: translateX(-50%);
 	}
+
 	.checkbox-answer {
 		padding: 8px 10px;
 		background-color: #f2f3f5;