封装的ajax获取数据。代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来。

第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享

——html——

.mui-input-group {

background: #fff;

}

.mui-input-row label {

width: 100%;

}

.mui-radio.mui-left label {

padding:20px 15px;

padding-left: 28px;

}

.mui-radio.mui-left input[type='radio']{

left: 0;

}

.mui-radio input[type='radio']{

top:19px;

width:22px;

height: 22px;

}

.mui-radio input[type='radio']:before {

position: relative;

top: 2px;

width: 18px;

height: 18px;

display: inline-block;

content: '';

background: url(../../img/question1.jpg) no-repeat;

background-size:90%;

}

.mui-radio input[type='radio']:checked:before {

content:'';

background: url(../../img/question2.jpg) no-repeat;

background-size:90%;

}

.mui-checkbox{width:auto;height: auto;border:none;}

.mui-checkbox.mui-left input[type=checkbox] {

top: 12px;

}

问卷调查

{{index+1}}/10

{{item.question_title}}

{{items.answer_option}}

上一题下一题

——css——

/* 问卷调查 */

.questionnaire2{margin:40px 20px 0 ;background-color: #fff;}

.questionnaire2-tit{background-color: #06b5ff;border-top-left-radius: 10px;border-top-right-radius: 10px;padding:10px 0;}

.questionnaire2-tit p{ color: #fff;font-size: 18px;text-align: center;margin-bottom: 0;padding:0 10px;}

.questionnaire2-tit p:nth-of-type(2){text-align: left;padding-top:10px;min-height:33px;max-height:73px;overflow: hidden;}

.questionnaire2-con{padding:0 10px;background-color: #fff;}

.questionnaire2-con dl{margin:0;}

.questionnaire2-con dl dd{margin:0;border-bottom: 1px solid #f4f4f4;height:auto!important;}

.questionnaire2-fot{margin-left: 20px;margin-right: 20px; border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;overflow: hidden;background-color: #fff;box-sizing: border-box;border-top:1px solid #f4f4f4;}

.questionnaire2-fot a{display: inline-block;float: left; width:50%;padding:15px 0;text-align: center; color: #999;}

.questionnaire2-fot a:first-child{border-right:1px solid #f4f4f4;}

.questionnaire2-fot #next.w{width:100%;}

.questionnaire2-fot #questionbtn{width:50%;border:none;font-size: 17px;padding:15px 0; color: #007aff; }

——js——

mui.init();

var vum = new Vue({

el: '#vmode',

data: {

questionitems: '',

questionScoreStatus: '',

answerlistitems: [],

active: 0,

answer: "",

answerArray: [],

showNext: true,

showtip: false,

score_level: ''

},

mounted: function() {

/**

* 问题列表

*/

app.ajax('financial/pjQuestionlist', {

type: 'post',

data: {},

ok: function(json) {

vum.questionitems = json.data;

},

ng: function(json) {

mui.alert(json);

}

});

},

methods: {

oprev: function(i) {

vum.active = i

if(vum.active == vum.questionitems.length - 1) {

vum.showNext = false

} else {

vum.showNext = true

}

},

review() {

linkToPage('questionNaire');

},

olast: function() {

let i = vum.active - 1

vum.answer = vum.answerArray[i]

if(i < 0) {

return

} else {

this.oprev(i)

}

},

subquestion: function() {

/**

* 答案提交

*/

if(vum.answer) {

vum.answerArray[vum.active] = vum.answer

vum.answer = ''

} else {

mui.alert('请选择一个答案');

return false;

}

var param = {};

param['financial_bid'] = localStorage.getItem("financial_bid");

param["answer_ids"] = vum.answerArray.join(',');

var pstr = param['financial_bid'] + param["answer_ids"];

param['signature'] = app.signature(true, pstr);

app.ajax('financial/pjQuestionAnswer', {

type: 'post',

data: param,

ok: function(json) {

mui(".popover1").popover('show');

vum.score_level = json.data.score_level;

document.getElementById("goinvest").addEventListener('tap', function() {

mui(".popover1").popover('hide');

linkToPage("invest");

});

},

ng: function(json) {

mui.alert(json);

}

});

},

oNext: function() {

if(vum.answer) {

vum.answerArray[vum.active] = vum.answer

vum.answer = ''

} else {

mui.alert('请选择一个答案');

return false;

}

let i = vum.active + 1

if(i != vum.questionitems.length) {

this.oprev(i)

}

}

}

});

ajax制作调查问卷,div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道...相关推荐

  1. div+mui+vue.js 制作问卷调查单页 ——题目答案是造的json

    div+mui+vue.js 制作问卷调查单页 --题目答案是造的json 先来看一下效果图: 主要就是用读取json题目和答案,记录答案ID. 一次性去读10道题目,vue.js控制当前题目的显示影 ...

  2. 使用 Vue.js 制作一个简单的调查问卷平台

    使用 Vue.js 制作一个简单的调查问卷平台 原文  https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题  ...

  3. 【Vue.JS】纯 Vue.js 制作甘特图

    效果图 在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果 推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...

  4. vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码

    码农那点事儿 关注我们,一起学习进步 基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...

  5. 如何制作调查问卷、问卷报告

    制作调查问卷 #步骤一:明确调查目的 #步骤二:设置标题+背景 简洁,感情中立 #步骤三:设置问题+选项 问题:可问不问的坚决不问,和调查目的无关的坚决不问.最后来两道开放性问题. 明确目的 确定维度 ...

  6. 怎么用超级文档免费制作调查问卷

    制作一个问卷简单,但是制作一个比较好的调查问卷,就需要稍微花一些精力,问卷调查一般包括前导语.问题.结束语等几部分,再加上一个好的工具.问卷需要做到几点,首先尽量把题目设置得更"接地气&qu ...

  7. Axure教程:用中继器制作调查问卷/考试试卷

    今天教大家用中继器制作调查问卷或考试试卷,包括了单选.多选和填空题. 制作完成后,以后使用方便,仅需简单填写中继器的内容,即可自动生成调查问卷或考试问卷,所以强烈推荐给各位使用. 原型预览及下载地址: ...

  8. 基于Vue.js制作的仿车轮驾考通APP端页面

    背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...

  9. 【Axure视频教程】用中继器制作调查问卷

    今天教大家在Axure里如何用中继器制作调查问卷的原型模板,问卷中包括单选题.多选题和填空题.这个模板是用中继器制作的,所以使用也非常方便,只需要在中继器表格里填写问题类型.内容.答案,即可自动生成对 ...

最新文章

  1. 单元格内多个姓名拆分成一列_EXCEL拆分单元格中的姓名,这都不叫事儿
  2. 有了这个 IDEA的兄弟,你还用 Navicat 吗?全家桶不香吗?
  3. python连接文本文件_Python连接文本文件
  4. 开始 Sencha Touch 2 之旅之三
  5. 【线上分享】海外超低延时链路设计的挑战与优化实践
  6. php zend msql,WINDOWS系统 + Apache +PHP5 +Zend + MySQL + phpMyAdmin安装方法
  7. mysql 非自然月统计_MySQL性能优化 — 实践篇1
  8. Oracle分析函数参考手册
  9. android防止内存溢出浅析
  10. MYSQL8 关键字(官方)
  11. JavaScript 中的函数式编程实践
  12. 用mysql完成的实际案例_mysql完成SQL统计的案例
  13. ubuntu下go插件delve下载安装
  14. cnm的下载频道,再c一次。
  15. i7 9750h和i7 8750h参数对比差多少
  16. ID卡介绍和工作原理
  17. 最新可用今日头条视频解析(简单分析+易语言实现)
  18. springboot将模板生成pdf文件
  19. 阿里首席风险官郑俊芳:安全是我们的生命线,将时刻保持敬畏心
  20. 80C51单片机PROTUES仿真C语言数码管点亮

热门文章

  1. 海康设备云平台简单控制
  2. 深入分析集群安全机制
  3. 【C语言】用二分查找法在有序数组中查找具体的某个数
  4. 2017,越努力才能越幸运
  5. 游戏引擎剖析 (10) 人工智能和导航(路径发现)
  6. 好全面的python笔记,那我就笑纳了
  7. 懂得放弃,才会拥有!
  8. linux蓝牙服务关闭,使用linux的hciconfig命令配置蓝牙设备
  9. 刷脸时代来临,深度解析人脸识别技术市场
  10. 决策树算法实现:泰坦尼克号乘客生存预测 (python实现)