uni-app实现问卷调查试卷

先向后台请求试卷内容，请求方法如下：

data() {return {sjlist:[],das:[],tmidlist:[]}
},
onLoad() {this.getdata();
},
methods: {// 请求页面数据getdata(){var access_token=uni.getStorageSync("access_token");var userid=uni.getStorageSync("userId");var category=uni.getStorageSync("category");var type=''if(category==1){type="风险评估问卷（个人）"}else{type="风险评估问卷（机构）"}uni.request({url: getApp().globalData.baseUrl+'/admin/syssjgl/sjmx',data: { type:type},header: {isToken: false,'TENANT-ID': "1566441363",'Authorization':'Bearer'+access_token},success: (res) => {console.log(res.data.data)this.sjmc=res.data.data[0].sjmcfor(var i=0;i<res.data.data.length;i++){this.sjlist.push(res.data.data[i])}}});}
}

数据可以是后台请求返回的，若不是就自己写吧，结果类似。

返回的数据如下（有三四层嵌套）：
是一个三层嵌套的数组。最外层数组sjlist，里面有大标题就有几个对象；
每个对象里有sjid属性，tms选项数组，里面有几题就有几个对象；
tms数组里每个对象里有tmid属性，das选项数组，里面有几个选项就有几个对象；
das数组里每个对象有dasid，以及具体信息。

之后在界面上用三层v-for循环嵌套
第一层v-for循环显示大标题，
第二次v-for循环显示题目，
第三次v-for循环显示答案选项，第三层要结合radio-group实现单选。
代码如下：

<view v-for="(sjitem, jsi) of sjlist" :key="jsi"><view class="title1">{{sjitem.ssfl}}</view><view v-for="(tmitem, tmi) of sjitem.tms" :key="tmi" class="title2"><view>{{tmitem.tmxh+tmitem.tmmc}}</view><radio-group @change="radioChange($event,tmitem)"><label v-for="(item, i) of tmitem.das" :key="i"><view class="title2"><radio :value="item.id.toString()" :checked="item.checked" /><text>{{item.xxxh+item.xxmc}}</text></view></label></radio-group></view></view>

效果就出来了，如下图所示：

如何拿到试卷选项的答案呢

首先界面radio选项的时候，value值我已经绑定了das的id，所以value就是id，记得加上.toString()，不然会报错。然后radio-group加上@change="radioChange($event,tmitem)"事件，并传入这个题目对象的所有选项答案

获取方法如下：

// 选择项结果radioChange($event,tmitem){for(var j=0;j<this.das.length;j++){this.tmidlist.push(this.das[j].tmid);}for(var i=0;i<tmitem.das.length;i++){if($event.detail.value==tmitem.das[i].id){if(this.tmidlist.indexOf(tmitem.tmId)==-1){this.das.push(tmitem.das[i])}else{for(var n=0;n<this.das.length;n++){if(tmitem.tmId==this.das[n].tmid){this.das.splice(n,1);this.das.push(tmitem.das[i])}}}}}},

uni-app实现问卷调查试卷相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

uni-app实现问卷调查试卷

uni-app实现问卷调查试卷

如何拿到试卷选项的答案呢

uni-app实现问卷调查试卷相关推荐

最新文章

热门文章