微信⼩程序实现答题样式1（显⽰题⽬）
咬文嚼字ppt今天群⾥有⼈问了⼀个问题，怎么实现单选题和多选题在单击时选中，想着反正也没啥事，就写个demo试试看，代码如下：梁起拱
⾸先在data⾥⾯添加问答题，如下：最强拍照手机
data: {
quest: [{
id: 1,
type: 1, //类型，1.单选，2.多选
question: "1.你有⼥朋友吗？(单选)",
answers: [{
content: 'A.有'
}, {
content: 'B.没有'
}]
}, {
id: 2,
type: 1,
question: "2.⽬前薪资在哪个范围？(单选)",
爱和感恩
answers: [{
content: 'A.3-6k'
}, {
content: 'B.6-8k'
}, {
content: 'C.8-10k'
}, {
content: 'D.10k以上'
跨中弯矩}]
}, {
id: 3,
type: 2,
question: "3.你喜欢哪⼀种编程语⾔？(多选)",
answers: [{
content: 'A.Java'
}, {
content: 'B.C语⾔'
}, {
content: 'C.PHP'
}, {
content: 'D.Python'
}, {
content: 'E.JavaScript'
}, {
content: 'F.其他'
}]
}]
},
然后在wxml⽂件⾥⾯显⽰问答题，代码如下：
<view class='quest_container' wx:for="{{quest}}" wx:key="id" wx:for-index="outterIndex">
风车动
<text>{{item.question}}</text>
<view wx:for="{{item.answers}}" wx:key="content" bindtap="answerSelected" data-outidx='{{outterIndex}}' data-idx="{{index}}" class="item {{item.lected?'active <text>{{t}}</text>
</view>
</view>
对应的绑定事件如下：
answerSelected(e) {
let outidx = e.currentTarget.datat.outidx;
let idx = e.currentTarget.datat.idx;
let question = this.data.quest[outidx];
if (pe == 1) {
//单选
for (let item of question.answers) {
item.lected = fal;
}菠菜泥
question.answers[idx].lected = true;
this.tData({
quest: this.data.quest
});
刺梨的功效与作用
} el if (pe == 2) {
//多选
question.answers[idx].lected = !question.answers[idx].lected; this.tData({
quest: this.data.quest
});
}
},
最终效果如下：
