前言

出了前三篇教程,感觉看的人很少。可能是uniapp目前使用的人太少了,可能他不够成熟,背后又不是大厂。不过嘛这系列教程是几个月前就准备好了的,不给他写完不符合我的性格。但后面的教程的节骤会比较快2333333~

实现多选题

回归正题,这篇教程开始实现多选题,首选项要思考多选题怎么和用户交互。一时没有想可以参考同类刷题APP的交互方式。这里参考驾考宝典的多选题实现。

首先,和单选题不同的是,在选项下面多了个确认按钮。当用户没有点击确认按钮,去点击选项的时候,使选项变灰。表示已被选择。待用户选完所有选项后,点击提交。再去判断某一个选项是否为正确选项。

CSS讲解

上一篇主要讲解的是methods的逻辑,这一篇就来讲解css控制来实现正确答案和错误答案颜色改变的实现吧。
选项的结构如下:

1
2
3
4
5
<ul :class="{active: isActive}">
<li class="option" :class="[question.answer.indexOf('A') !== -1 ? 'green' : 'red', select_a == true ? 'gray' : 'black']" @click="select('A')">
<i>A</i>
<view class="option-text">{{question.optionA}}</view>
</li>

一开始,isActive为false,即ul上没有active这个class,当点击提交了isActive才为true。然后看下li的class。首先option:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.option:first-child {
margin-top: 10px;
}
.option {
min-height: 100upx;
}
.option i {
font-style: normal;
line-height: 32px;
color: #4680fe;
text-align: center;
display: inline-block;
border: 1px solid #4680fe;
height: 32px;
width: 32px;
margin: 0 10px 0 10px;
float: left;
border-radius: 25px;
}

没啥好说的,就是一开始默认样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:class="[question.answer.indexOf('A') !== -1 ? 'green' : 'red', 
``
:class不想解释,后面用indexOf('A') !== -1判断是否是正确答案,是的话给加green,不是加的red。但不是一开始就显示的,原因在于css是这样写的:
```css
.active .green i {
color: #fff;
background-color: #1AAD19;
border: 1px solid #1AAD19;
}
.active .red.gray i {
color: #fff;
background-color: #FF3333;
border: 1px solid #FF3333;
}
.active .green {
color: #1AAD19;
}
.active .red.gray {
color: #FF3333;
}

只有active存在时才有对应样式,即用户点击了提交才会变色。

1
select_a == true ? 'gray' : 'black'

select_a表示是否选择了A,ture表示选择了A,给加上gray,否则加上black。(black其实没写这个类的css,因为默认就是黑色)

其他代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import question_data from '../multiple_choice.js'
export default {
data() {
return {
question_data: question_data,
count: 0,
type: '多选题',
question: {},
select_option: '',
selected: false,
startPoint: {},
endPoint: {},
page_index: 0,
isActive: false,
select_a: false,
select_b: false,
select_c: false,
select_d: false,
}
},
onLoad() {
this.question = this.question_data[0]
this.count = this.question_data.length
},
methods: {
commit() {
this.isActive = true
},
select(option) {
// if (this.selected) return
if (option !== this.question.answer) {
switch (option) {
case 'A':
this.select_a = !this.select_a
break
case 'B':
this.select_b = !this.select_b
break
case 'C':
this.select_c = !this.select_c
break
case 'D':
this.select_d = !this.select_d
break
default:
break
}
}
this.selected = true
},
......
......

文章里贴太多代码了不好,后面会把代码发布到github上获公众号上。
哦,差点忘了给出多选题的json的效果图。如下:(json还是之前那波操作,网址在图里)


To be Continued……

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦