微信小程序实现答题样式1（显示题目）

今天群里有人问了一个问题，怎么实现单选题和多选题在单击时选中，想着反正也没啥事，就写个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.selected?'active':''}}"><text>{{item.content}}</text></view>
</view>

对应的绑定事件如下：

answerSelected(e) {let outidx = e.currentTarget.dataset.outidx;let idx = e.currentTarget.dataset.idx;let question = this.data.quest[outidx];if (question.type == 1) {//单选for (let item of question.answers) {item.selected = false;}question.answers[idx].selected = true;this.setData({quest: this.data.quest});} else if (question.type == 2) {//多选question.answers[idx].selected = !question.answers[idx].selected;this.setData({quest: this.data.quest});}},

最终效果如下：

微信小程序实现答题样式1（显示题目）相关推荐

微信小程序实现答题样式3（记录得分）
首先在上一篇的基础上新增了一个正确答案以及对应的分数,具体的结构如下: data: {quest: [{id: 1,type: 1, //类型,1.单选,2.多选question: "1.C ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序动态修改样式
前言微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式一.wxml <view class="fb_tips"wx:for="{{arr11 ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...

微信小程序实现答题样式1（显示题目）

微信小程序实现答题样式1（显示题目）相关推荐

最新文章

热门文章