uni-app小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)

1,最近再搞一个关于答题的小程序,刚开始是点击切换题目,后来改成左右切换的,搞得脑袋有点大,用swiper
搞了半天还是有bug,无奈之下只能去百度了,找到了一个模板,稍微改变了一点,记录下来
里面引用了colorUI一些内容,需要的去下载一些就可以了
效果
在这里插入图片描述

html部分
这里没啥好说的,就是根据不同的状态显示不同的内容

<template>
	<view>
		<view id="top-box" class="cu-bar bg-white bottoms solid-bottom">
			<view class="action text-black exam-types">
				<text v-if="currentType===1">判断题</text>
				<text v-else-if="currentType===2">单选题</text>
				<text v-else-if="currentType===3">多选题</text>
				<text v-else-if="currentType===4">填空题</text>
				<text v-else-if="currentType===5">问答题</text>
			</view>
			<!-- 题目进度 -->
			<view class="progress">
				<text>{
   {
   pageIndex}}</text>
				<text>/{
   {
   subjectList.length}}</text>
			</view>
			<view class="action exam-card">
				<button class="cu-btn bg-green shadow" @tap="showCardModal" data-target="modalCard">答题卡</button>
			</view>
		</view>
		<view class="cu-modal" :class="modalCard=='modalCard'?'show':''" @tap="hideCardModal">
			<view class="cu-dialog" @tap.stop>
				<scroll-view class="page padding" :scroll-y=true :style="{'height':swiperHeight}">
					<view class="cu-bar solid-bottom">
						<view class="action">
							<text class="cuIcon-title text-red"></text>答题卡
						</view>
					</view>
					<!-- 选择题目 -->
					<view class="grid col-5 ">
						<view class="margin-tb-sm text-center" v-for="(subject,index) in subjectList" :key="index">
							<button class="cu-btn round" :class="[subject.userAnswer.length===0?'line-grey':'bg-red']" @click="assignSubject(index)">{
   {
   index+1}}</button>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 提交试题纠错部分 -->
		<view class="cu-modal padding " :class="modalError=='modalError'?'show':''" @tap="hideErrorModal">
			<view class="cu-dialog bg-white" @tap.stop>
				<view class="cu-bar solid-bottom ">
					<view class="action">
						<text class="cuIcon-title text-red"></text>试题纠错
					</view>
				</view>
				<radio-group class="block">
					<view class="cu-list menu text-left">
						<view class="cu-item cu-item-error" v-for="error in errorList" :key="index">
							<radio :value="error"></radio>
							<view class="title text-black margin-left">{
   {
   error}}</view>
						</view>
					</view>
				</radio-group>
				<view class="padding flex flex-direction ">
					<button class="cu-btn bg-red margin-tb-sm lg" @click="SubmitError">提 交</button>
				</view>
			</view>
		</view>
		<form>
			<swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" :style="{'height':swiperHeight}">
				<swiper-item v-for="(subject,index) in subjectList" :key="index">
					<view v-if="index-subjectIndex>=-1&&index-subjectIndex<=1">
						<scroll-view scroll-y=
  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在 uni-app 小程序中实现环形倒计时,可以使用 uni-canvas 组件结合 JavaScript 实现。以下是一个简单的实现过程: 1. 在页面中添加一个 uni-canvas 组件,设置宽度和高度,并设置 canvas-id 属性,例如: ``` <uni-canvas canvas-id="countdown" style="width: 200px; height: 200px;"></uni-canvas> ``` 2. 在页面的 JavaScript 中,获取到 canvas 绘图上下文对象,并设置绘图相关属性,例如: ``` const ctx = uni.createCanvasContext('countdown', this); const radius = 80; // 环形半径 const lineWidth = 10; // 环形线宽 const countDownTime = 60; // 倒计时时间,单位为秒 let remainingTime = countDownTime; // 剩余时间 const timer = setInterval(() => { remainingTime--; drawCountDown(remainingTime); if (remainingTime <= 0) { clearInterval(timer); } }, 1000); function drawCountDown(remainingTime) { const angle = (2 * Math.PI / countDownTime) * (countDownTime - remainingTime); ctx.clearRect(0, 0, 200, 200); // 清空画布 ctx.beginPath(); ctx.arc(100, 100, radius, -Math.PI / 2, angle - Math.PI / 2, false); ctx.setStrokeStyle('#ff0000'); ctx.setLineWidth(lineWidth); ctx.stroke(); ctx.closePath(); ctx.draw(); } ``` 3. 在 drawCountDown 函数中,根据剩余时间计算出当前的环形绘制角度,并绘制环形。其中,使用 arc 方法绘制环形,设置起始角度为 -Math.PI / 2,结束角度为当前角度减去 -Math.PI / 2,圆心坐标为 (100, 100)。 4. 使用 setInterval 方法每隔 1 秒钟更新一次剩余时间,并重新绘制环形,直到倒计时结束。 以上是一个简单的 uni-app 小程序中实现环形倒计时的过程,你可以根据需要进行进一步的优化和美化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值