uniapp实现滑动答题

1、用HBuildX创建vue3项目

2、 编辑页面

引入swipet组件，设置高度为100vh，整个屏幕都是swiper滑动窗口

<template>
	<view class="content">
		<swiper>
			<swiper-item>
				<view class="swiper-item">1</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<style lang="less">
swiper{
	background-color: pink;
	height: 100vh;
}
</style>

3、模拟题目

<script setup>
	import {reactive} from 'vue'
	let data=reactive({
		list: [
			{
				"question": "对未取得驾驶证驾驶机动车的，追究其法律责任。",
				"option1": null,
				"option2": null,
				"option3": null,
				"option4": null,
				"answer": "对",
				"explain": "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
				"pic": null,
				"type": "C1,C2,C3",
				"chapter": "驾驶证和机动车管理规定"
			},
		{
			"question": "驾驶机动车应当随身携带哪种证件？",
			"option1": "A、工作证",
			"option2": "B、驾驶证",
			"option3": "C、身份证",
			"option4": "D、职业资格证",
			"answer": "B",
			"explain": "《道路交通安全法》规定，驾驶人应当按照驾驶证载明的准驾车型驾驶机动车；驾驶机动车时，应当随身携带机动车驾驶证。",
			"pic": null,
			"type": "C1,C2,C3",
			"chapter": "驾驶证和机动车管理规定"
		},
		]
	})
</script>

4、完整代码

<template>
	<swiper :current="data.current" @change="changeSwiper">
		<swiper-item v-for="item in data.list" :key="index">
			<view class="swiper-item">
				<!-- 题目 -->
				<div>{
   
   {item.question}}</div>
				<!-- 选项 -->
				<div @click="judge">
					<!-- 选择题 -->
					<div v-if="item.option1!=null">
						<button data-index="A">A</button>
						<button data-index="B">B</button>
						<button data-index="C">C</button>
						<button data-index="D">D</button>
					</div>
					<!-- 判断题 -->
					<div v-else>
						<button data-index="对">对</button>
						<button data-index="错">错</button>
					</div>
				</div>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import {reactive} from 'vue'
	let data=reactive({
		list: [
			{
				"question": "对未取得驾驶证驾驶机动车的，追究其法律责任。",
				"option1": null,
				"option2": null,
				"option3": null,
				"option4": null,
				"answer": "对",
				"explain": "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
				"pic": null,
				"type": "C1,C2,C3",
				"chapter": "驾驶证和机动车管理规定"
			},
			{
				"question": "驾驶机动车应当随身携带哪种证件？",
				"option1": "A、工作证",
				"option2": "B、驾驶证",
				"option3": "C、身份证",
				"option4": "D、职业资格证",
				"answer": "B",
				"explain": "《道路交通安全法》规定，驾驶人应当按照驾驶证载明的准驾车型驾驶机动车；驾驶机动车时，应当随身携带机动车驾驶证。",
				"pic": null,
				"type": "C1,C2,C3",
				"chapter": "驾驶证和机动车管理规定"
			},
		],
		current:0
	})
	const judge=(e)=>{
		// 获取点击的选项
		let {index}=e.target.dataset
		if(index==data.list[data.current].answer){
			console.log('回答正确');
		}else{
			console.log('回答错误');
		}
	}
	const changeSwiper=(e)=>{
		// 获取swiper的索引
		data.current=e.detail.current
	}
</script>

<style scoped lang="less">
	swiper{
		height: 100vh;
		background-color: pink;
	}
</style>

5、实现原理

5、1用事件委派来获取用户点击的选项，不需要在每个button添加@click事件

5、2使用swiper的detail.current获取每个swiper-item项的索引，实现答案判断

5、3在judge回答正确（错误）后可以自行实现功能

如：回答正确swiper滑动下一项

回答错误将当前题目加入错题集，显示解析等等