1.先来看下效果（左上展示题目数量以及当前题序号，当第一题时只有下一题按钮，未回答问题时无法点击下一题，且回答结果展示错误或正确的颜色）
2.接下来我们来看下html是怎么写的吧
<!-- 左边数据 --><div class="top-left"><img src="../../images/question_left.png" alt="" /><div class="top-text">{{ idx + 1 }}/{{ questionList.length }}</div></div><!-- 问答题目 --><div class="card-min" v-for="(item, index) in questionList" :key="index" v-show="index == idx"><div class="card-top">{{ item.questionName }}</div><div class="card-select"><!-- 如果选择的答案未A且正确结果为A,其他选项同理--><div :class="[item.isTrue && item.answerCorrect == 'A' ? 'yes' : '',!item.isTrue && item.result == 'A' ? 'no' : '',!item.isTrue && item.answerCorrect == 'A' && item.result? 'yes': '',]" class="select-min" v-if="item.answerA" @click="handleCilck('A', index)"><div class="select-con">A.{{ item.answerA }}</div></div></div></div><!-- 按钮部分 --><div class="bot-but"><div class="but-show" @click="back()" v-if="idx != 0 && isShow" :class="idx == 0 ? 'but-show' : 'before-back'"><!-- 上一题 -->上一题</div><div class="next" @click="next(idx)" v-if="isShow" :class="idx == 0 ? 'but-show' : 'before-next'"><!-- 下一题 -->下一题</div><!-- 提交 --><div class="next" v-if="!isShow" @click="submit(idx)" :class="idx == 0 ? 'next' : 'but-show'"><!-- 提交 -->提交</div></div>3.继续css样式
<--选取结果的样式-->
.select-min {width: 100%;min-height: 85px;border-radius: 50px;margin: 35px 0px;padding: 0px 35px;font-size: 32px;background: #e4efff;display: flex;align-items: center;&.yes {background: #70c9ad;}&.no {background: #ed8254;}.select-con {line-height: 45px;}}<--所有按钮的样式-->.bot-but {width: 100%;height: 90px;line-height: 90px;text-align: center;position: fixed;bottom: 200px;display: flex;.but-show {width: 70%;height: 100%;margin: 0 auto;color: #ffffff;font-size: 36px;border-radius: 50px;}.next {width: 70%;height: 100%;margin: 0 auto;background: #fdc003;color: #ffffff;font-size: 36px;border-radius: 50px;}.before-next {width: 40%;height: 100%;margin: 0 auto;color: #ffffff;font-size: 36px;border-radius: 50px;background: #fdc003;}.before-back {width: 40%;height: 100%;margin: 0 auto;color: #4c69e4;font-size: 36px;border-radius: 50px;background: #ffffff;}}4.处理数据环节
1.获取题目数据这个忽略(记得先定义一个 参数 ，方便后面处理 index,我定义的是idx 哦)
2.我根据我这个接口数据返回数据，往里面加了2个参数，如下：item.result = ""; //选择的结果item.isTrue = false; //结果是否正确
3. 我们来看下next 方法（调用方法时传参为ids)next(index) {if (!this.questionList[index].result ||this.questionList[index].result == "" ||this.questionList[index].result == null) {return;} else {this.idx++;}// 当前页等于最后一题 下一题按钮隐藏if (this.idx == this.questionList.length - 1) {return (this.isShow = false);} else {return (this.isShow = true);}},
4.返回直接处理index就好back() {this.idx--;},
5.接下来就是点击上一题 下一题的啦handleCilck(str, i) {const item = this.questionList[i];if (item.result) {return;}if (item.answerCorrect == str) {item.result = str;item.isTrue = true;this.num++;} else {item.result = str;item.isTrue = false;}},6.最后提交按钮submit(index) {if (!this.questionList[index].result ||this.questionList[index].result == "" ||this.questionList[index].result == null) {return;} else {//提交表单}},
