Uni App小白学习笔记(四)
前言
出了前三篇教程,感觉看的人很少。可能是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 | import question_data from '../multiple_choice.js' |
文章里贴太多代码了不好,后面会把代码发布到github上获公众号上。
哦,差点忘了给出多选题的json的效果图。如下:(json还是之前那波操作,网址在图里)
To be Continued……
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号