uniapp实现在线答题

最新推荐文章于 2024-05-01 19:58:43 发布

ljw@lq

最新推荐文章于 2024-05-01 19:58:43 发布

阅读量5.3k

点赞数 3

分类专栏： uniapp 文章标签： uni-app vue.js 小程序前端

本文链接：https://blog.csdn.net/Shiny_boy_/article/details/124036952

版权

uniapp 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

使用uniapp实现简单答题模板

功能描述：

实现移动端在线答题（本文章仅实现前端静态答题）

效果图

1、首页
在这里插入图片描述

2、答题页面
在这里插入图片描述
3、答题卡

首页代码：

<template>
	<view>
		<view v-for="(data, index) in dataList" :key="data.id">
			<examList :ksmsg="data"></examList>
		</view>
	</view>
</template>

<script>
	import examList from '@/components/custom/exam_list.vue'
	export default {
		components:{
			examList
		},
		data() {
			return {
				dataList: [
					{
						id: 1,
						title: '测试卷一专项答题',
						date: '2022/04/04',
					},
					{
						id: 2,
						title: '测试卷二专项答题',
						date: '2022/04/03',
					},
					{
						id: 3,
						title: '测试卷三专项答题',
						date: '2022/04/01',
					},
					{
						id: 4,
						title: '测试卷四专项答题',
						date: '2022/03/30',
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	
</style>