本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下
代码:
& lt; !——hotblood_gongkao/页面/回答/answer.wxml——比;
& lt; !——内容比;
& lt;视图类=回答列表的祝辞
& lt;视图类=answer-child的祝辞
& lt;文本类=' answer-title '祝辞& lt;文本样式=' margin-right: 28 rpx;在{{num + 1}}/{{quesyion.length}} & lt;/text>{{问题(num) [0]}} & lt;/text>
& lt;视图类=answer-options的祝辞
& lt;视图类="选项{{selectIndex [0] .sureid& # 63;“选择”:“}}”材料指数={{idx}} 1的数据电文=A bindtap="{{是否# 63;”:selectAnswer}}”在
& lt;图像类="酒后驾车{{selectIndex [0] .sureid& # 63;“dui2”:“}}”src=" https://www.yisu.com/images/icon-dui.png "/比;
& lt; text> & lt;文本样式=margin-right: 36 rpx;的祝辞& lt;/text>{{问题(num) [1]}} & lt;/text>
& lt;/view>
& lt;视图类="选项{{selectIndex [1] .sureid& # 63;“选择”:“}}”材料指数={{idx}} 2的数据电文=B bindtap="{{是否# 63;”:selectAnswer}}”在
& lt;图像类="酒后驾车{{selectIndex [1] .sureid& # 63;“dui2”:“}}”src=" https://www.yisu.com/images/icon-dui.png "/比;
& lt; text> & lt;文本样式=margin-right: 36 rpx;的祝辞B & lt;/text>{{问题(num) [2]}} & lt;/text>
& lt;/view>
& lt;视图类="选项{{selectIndex [2] .sureid& # 63;“选择”:“}}”材料指数={{idx}} 3的数据电文=' C ' bindtap="{{是否# 63;”:selectAnswer}}”在
& lt;图像类="酒后驾车{{selectIndex [2] .sureid& # 63;“dui2”:“}}”src=" https://www.yisu.com/images/icon-dui.png "/比;
& lt; text> & lt;文本样式=margin-right: 36 rpx;的祝辞C & lt;/text>{{问题(num) [3]}} & lt;/text>
& lt;/view>
& lt;视图类="选项{{selectIndex [3] .sureid& # 63;“选择”:“}}”材料指数={{idx}} 4的数据电文=' D ' bindtap="{{是否# 63;”:selectAnswer}}”在
& lt;图像类="酒后驾车{{selectIndex [3] .sureid& # 63;“dui2”:“}}”src=" https://www.yisu.com/images/icon-dui.png "/比;
& lt; text> & lt;文本样式=margin-right: 36 rpx;的祝辞D & lt;/text>{{问题(num) [4]}} & lt;/text>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;视图类="回答{{isWan& # 63;“isShow”:“isHide}}”在
& lt; text>正确答案{{问题(num) [3]}} & lt;/text>
& lt;/view>
& lt;视图类=" subBtn {{isque& # 63;“isShow”:“isHide}}“bindtap='确认'比;
& lt; text>确定& lt;/text>
& lt;/view>
& lt;视图类=" subBtn{{是# 63;“isHide”:“isShow}}“bindtap=皀ext”比;
& lt; text> {{con}} & lt;/text>
& lt;/view>
& lt;视图类=" subBtn {{iswancheng& # 63;“isShow”:“isHide}}“bindtap='提交'比;
& lt; text>提交答卷& lt;/text>
& lt;/view>
& lt;/view>
CSS: ,
/* hotblood_gongkao/页面/回答的答案。wxs *//* */.titleImg {
宽度:734 rpx;
高度:45 rpx;
位置:固定;
上图:0;
显示:flex;
flex-direction:行;
对齐项目:中心;
左:50%;
背景:# fbfbfb;
margin-left: -367 rpx;
z - index: 10;
}
{.titleImg形象
高度:35 rpx;
宽度:100%;
}/* */结束
页面{
高度:100%;
宽度:100%;
背景:# fbfbfb;
}
.isHide {
显示:没有;
}
.isShow {
显示:块;
}
.title {
字体大小:34 rpx;
颜色:# a6a6a6;
保证金:69 rpx 0 0 0;
显示:flex;
flex-direction:列;
justify-content:中心;
对齐项目:中心;
}
.answer-list {
}
.answer-child {
宽度:672 rpx;
保证金:0汽车;
背景:# fff;
border - radius: 20 rpx;
padding-top: 34 rpx;
margin-bottom: 20 rpx;
margin-top: 72 rpx;
box-sizing: border-box;
不必:0 0 4 rpx # dcdcdc;
}
.answer-title {
字体大小:32 rpx;
保证金:0 0 0 52 rpx;
}
.answer-options {
显示:flex;
flex-direction:列;
宽度:642 rpx;
保证金:32 rpx汽车0汽车;
}
.options {
宽度:100%;
身高:72 rpx;
行高:72 rpx;
字体大小:32 rpx;
padding-left: 30 rpx;
box-sizing: border-box;
margin-bottom: 4 rpx;
位置:相对;
边界:2 rpx固体# fff;
}
.dui {
位置:绝对的;
高度:41 rpx;
宽度:59 rpx;
上图:50%;
margin-top: -20 rpx;
右:16 rpx;
显示:没有;
}
.dui2 {
显示:块!重要;
}
.select {
边界:2 rpx固体# 4 ab07e;
box-sizing: border-box;
}
。submit {
身高:120 rpx;
宽度:100%;
背景:# 4 ab07e;
颜色:# fff;
字体大小:34 rpx;
行高:120 rpx;
text-align:中心;
位置:固定;
左:0;
底部:0;
}/*正确答案*/.answer {
宽度:100%;
text-align:中心;
颜色:# ff122f;
字体大小:34 rpx;
粗细:大胆的;
margin-top: 64 rpx;
}/* */结束/*下一题*/.subBtn {
宽度:304 rpx;
身高:86 rpx;
背景:# 4 ab07e;
颜色:# fff;
字体大小:34 rpx;
text-align:中心;
行高:86 rpx;
border - radius: 20 rpx;
保证金:190 rpx汽车0汽车;
}
