小程序实现选择题选择效果

本文实例为大家分享了小程序实现选择题的显示方法，供大家参考，具体内容如下

下面是三张效果图：初始图，选项正确图，选项错误图。

页面结构代码：

view class=' selection ' view class=' { { view 1 } } ' bind tap=' view 1 click ' id=' 1 ' a/view view view class=' { { view 2 } } ' bind tap=' view 2 click ' id=' 2 ' b/view view view view class=' { { view 3 } } bind tap=' view 3 click ' id=' 3 ' c/view view class=' { { view 4 } } ' bind tap=' view 4 click ' id=' 4 ' d/view/view js代码：

页面({ /** *页面的初始数据*/data : { view 1: ' selection 1 '，view2: 'selection1 '，view3: 'selection1 '，view 43: ' selection 1 '，//默认答案为2,后台会给的key: 2，//选项是否被点击isSelect: false }，view1Click:函数(e) { var select=e.target.id //选项没被选择时将执行if(！this.data.isSelect) { //将选项设置为"已被选择“这个。setdata({ is select: true })//注意！此处必须是'=='而不是=' if(select==this。数据。关键){这个。setdata({ view 1: ' selection 2 ' })} else { this。setdata({ view 1: ' selection 3 ' })//将正确选项显示出来这个。显示答案(这个。数据。键)} }，view2Click:函数(e) { var select=e.target.id //选项没被选择时将执行if(！这个。数据。是select){ this。setdata({ is select : true })//注意！此处必须是'=='而不是=' if(select==this。数据。关键){这个。setdata({ view 2: ' selection 2 ' })} else { this。setdata({ view 2: ' selection 3 ' })//将正确选项显示出来这个。显示答案(这个。数据。键)} }，view3click :函数(e){ var select=e . target。id/选项没被选择时将执行if(！这个。数据。是select){ this。setdata({ is select : true })//注意！此处必须是'=='而不是=' if(select==this。数据。关键){这个。setdata({ view 3: ' selection 2 ' })else { this。setdata({ view 3: ' selection 3 ' })//将正确选项显示出来这个。显示答案(这个。数据。键)} } }，view4Click:函数(e) { var select=e.target.id //选项没被选择时将执行if(！这个。数据。是select){ this。setdata({ is select : true })//注意！此处必须是'=='而不是=' if(select==this。数据。关键){这个。setdata({ view 4: ' selection 2 ' })else { this。setdata({ view 4: ' selection 3 ' })//将正确选项显示出来这个。显示答案(这个。数据。键)} }，显示答案：函数(键){ //通过立刻语句判断正确答案，从而显示正确选项开关(钥匙){案例1:这个。setdata({ view 1: ' selection 2 ' })break；2:号案件。setdata({ view 2: ' selection 2 ' })break；案例：这个。setdata({ view 3: ' selection 2 ' })break；默认：这个。setdata({ view 4: ' selection 2 ' })} } })wxss代码：选择1 {宽度： 400rpx高度： 150 rpx背景-颜色：灰色；显示： flex flex-方向：柱；证明内容：空间环绕；align-items:居中；} .选择2 {宽度： 400 rpx高度： 150 rpx背景-颜色：蓝色；显示： flex flex-方向：柱；证明内容：空间环绕；align-items:居中；} .选择3 {宽度： 400 rpx高度： 150 rpx背景-颜色：红色；显示： flex flex-方向：柱；证明内容：空间环绕；align-items:居中；}.选择{ width: 750rpx高度： 800 rpx显示： flex flex-方向：柱；证明内容：空间环绕；align-items:居中；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。