Tips:
前端进阶的概念一直比较模糊，我们往往以掌握知识的多少来划分初级中级和高级，但这并不全面，谁都不能保证自己掌握的知识是最全最好的，尤其在前端工程师这个职业，每天都是日新月异。
所以，我认为要分辨一个前端工程师的境界，除了掌握知识的多寡，还要掌握前端的思想，以及对知识的应用程度，评判的标准简单划分初级就是页面与页面之间的交互，中级是页面与数据之间的交互，高级就是数据与数据之间的交互，微信小程序的设计思想就是基于数据与数据之间的交互，我们操作更多的是数据，而非document。
下面讲解一下在线答题的思路，为什么那这个模块来说，因为这是一个比较简单、典型而且又实际应用的案例。
原文：http://www.yealuo.com/WebArticle/Detail?KeyValue=A410D649-424E-4123-A0C5-FFC768F24FB2&ArticleType=zw
首先，我们通过数据接口拿到试卷的试题，渲染到页面上之后，就可以答题了，而答题的过程，其实是操作从接口拿到的数据，这样我们每次操作改变的都是数据而非页面。
然后在通过页面调整传参的形式，把做题结果的数据传递到下一个目标页面，进行需要的数据操作（筛选，计算，渲染）等。 整个做题的过程，都发生在前端，发生在接口数据上，只有在最后一步，保存做题结果的时候才与服务端交互。 这个案例很简单，也很典型，没什么难度，就是想记录一下这种思想，为了便于运行，我先用模拟数据代替接口数据，下面请看代码：
（1）开始答题 <!--pages/examAsw/examAsw.wxml--> <view class='exasw-com'> <view class="cont-tit"> <view class="L a-tit"> <label wx:if="{{chckTypeNum==1}}"> 单项选择 </label> <label wx:if="{{chckTypeNum==2}}"> 多项选择 </label> <label wx:if="{{chckTypeNum==3}}"> 简答题 </label> </view> <view class='L setTime'> <image src='/images/sttime.png' class='sttimg' /> <text>{{currentTime}}</text> </view> <view class="R aswNum"><text>{{currentTab+1}}</text>/{{page}}</view> </view> <swiper current="{{currentTab}}" duration="300" class='asw-box' bindchange="swiperTab" style='min-height:600px;'> <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}"> <swiper-item> <view class='exam-com'> <view class='exam-title'> {{item.aswTitle}}<text> {{item.aswType}}</text> </view> <block wx:if="{{item.chckType==1}}"> <radio-group class="radio-group" bindchange="radioChange" data-idx="{{index}}"> <label class="radio change-item" wx:for="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2"> <radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}} </label> </radio-group> </block> <block wx:if="{{item.chckType==2}}"> <checkbox-group class="checkbox-group" bindchange="checkboxChange" data-idx="{{index}}"> <label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:key="{{item.aswId}}" wx:for-item="item2" data-index="{{index}}" > <checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}} </label> </checkbox-group> </block> <block wx:if="{{item.chckType==3}}"> <textarea class='aswTarea' maxlength="-1" bindinput="bindTextAreaBlur" auto-height placeholder="填写你的答案" data-idx="{{index}}"/> </block> </view> </swiper-item> </block> </swiper> </view> <view class='page-footer'> <view class='footer-item1'> <image src='/images/zx.png' style='width:21px;height:18px;'/> 咨询 </view> <view class='footer-item1'> <image src='/images/sc.png' style='width:21px;height:18px;'/> 收藏 </view> <view class='footer-btn-box'> <view class='footer-btn' bindtap="actionSheetTap">答案解析</view> <view class='footer-btn on' bindtap="subAswData">提交答卷</view> </view> </view> <action-sheet hidden="{{actionSheetHidden}}" style="z-index: 999; "> <block wx:for="{{analysisData}}" wx:key="{{analysisData.aswId}}" wx:for-index="indnum"> <view class='exam-com'> <view class='exam-bottom'> <view class='exam-bootom-txt'> 正确答案：<text class='exam-yes'>{{item.trueAsw}}</text> </view> <view class='exam-bootom-tip' > <text>答案解析：</text> <label>{{item.analysisTxt}}</label> </view> </view> </view> </block> <view class="closeAsw" bindtap="actionSheetTap"> <image src='/images/close.png' style='width:30px;height:30px;'/> </view> </action-sheet> /* pages/examAsw/examAsw.wxss */ .L,.R,.fl,.fr{display:inline;} .L ,.fl{float:left;} .R ,.fr{float:right;} .aswNum{text-align: right;} .exasw-com{padding: 10px 20px;} .cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;} .cont-tit .a-tit{ width: 40%;} .cont-tit .aswNum{ width: 30%;} .cont-tit .setTime{position: relative; width: 30%; font-weight: bold;color: #666;font-size: 16px; text-align: center;} .cont-tit .sttimg{width: 30px;height: 30px;display: block;} .cont-tit .setTime text{display: block;left: -5px;top: 5px; font-size: 14px;color: #2F99EB; position: absolute;} .asw-box{padding-top: 20px; font-size: 14px;} .exam-com{clear: both;} .exam-title{color: #333;line-height: 25px;} .exam-title text{font-size: 12px;color: #999;} .change-radio,.change-item{display: block;clear: both; padding: 5px 10px } .page-footer{position: fixed;z-index: 99; bottom: 0; height: 50px;line-height: 50px;padding: 10px 0; background-color: #eee;width: 100%;} .footer-item1{width: 25px;float: left;font-size: 12px; line-height: 20px; padding-left: 20px; padding-top: 5px;} .footer-item1 image{display: block;} .footer-btn-box{float: right;width: 240px; background-color: #7ABEF2;height: 50px;color: #fff; border-radius: 15px; margin-right: 15px;overflow: hidden;} .footer-btn-box .footer-btn{float: left;width: 50%; text-align: center;} .footer-btn-box .footer-btn.on{background-color:#2F99EB; } .aswTarea{border: 1px solid #ccc; min-height: 60px;padding: 10px;margin: 10px auto; width: 95%;} .exam-com{clear: both;padding: 20px;position: relative;} .exam-bottom{font-size: 14px;color: #666;} .exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;} .exam-bootom-txt text{font-weight: bold; padding-right: 20px;} .exam-bootom-txt .exam-yes{color: #00CC00;} .exam-bootom-txt .exam-you{color: #f00;} .exam-bootom-tip{clear: both;} .exam-bootom-tip text{font-weight: bold; font-size: 14px;} .exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;} .closeAsw{position: absolute;z-index: 9991;right: 5px; bottom:5px;width: 30px;height: 30px;} .closeAsw image{display: block;} // pages/examAsw/examAsw.js Page({ /** * 页面的初始数据 */ data: { currentTab:0, currentTime: "240:00",//分钟 startTime: 240,//分钟 setInter: '',//存储定时器 page:0, chckTypeNum: 1, subAswData:[ { aswId:"1",//试题ID chckType: 1,//试题类型（1单选，2多选，3简答题） aswTitle:" 根据现行《企业会计准则》，企业在财务报表显著位置至少应披露的项目有（ ）",//试题标题 aswType:"(2014年《建设工程经济》真题)",//试卷名称 aswItem:[//试题选项 { name: 'USA', value: 'A',text: 'A、编报企业名称' }, { name: 'CHN', value: 'B',text: 'B、资产负债表日或会计报表涵盖'}, { name: 'BRA', value: 'C',text: 'C、人民币金额单位' }, { name: 'JPN', value: 'D',text: 'D、企业财务负责人姓名' }, { name: 'ENG', value: 'E',text: 'E、是否合并会计报表' } ], trueAsw: "A",//正确答案 analysisTxt: "我哦哦我我欧尼",//答案解析 answerCenter: ""//答案容器 }, { aswId: "2",//试题ID chckType: 2,//试题类型（1单选，2多选，3简答题） aswTitle: " 下列不属于通过信息技术在工程管理中的开发和应用能实现的是（ ）",//试题标题 aswType: "(2014年《建设工程经济》真题)",//试卷名称 aswItem: [//试题选项 { name: 'A', value:'A', text: 'A、信息获取便捷' }, { name: 'B', value: 'B',text: 'B、信息流扁平化' }, { name: 'C', value: 'C',text: 'C、BIM' }, { name: 'D', value: 'D',text: 'D、信息透明度提高' } ], trueAsw: "A,B",//正确答案 analysisTxt: "接口进口量进口量将",//答案解析 answerCenter:""//答案容器 }, { aswId: "3",//试题ID chckType: 3,//试题类型（1单选，2多选，3简答题） aswTitle: " 下列不属于通过信息技术在工程管理中的开发和应用能实现的是，请简答！",//试题标题 aswType: "(2014年《建设工程经济》真题)",//试卷名称 aswItem:[], trueAsw: "",//正确答案 analysisTxt: "根据我国现行财税制度，可以用来偿还贷款的资金有：利润，固定资产折旧费，无形资产和其他资产摊销费，减免的营业税金。",//答案解析 answerCenter: ""//答案容器 } ], actionSheetHidden: true,//答案解析或隐藏 analysisData: [ { aswId: "",//试题ID trueAsw: "",//正确答案 analysisTxt: ""//答案解析 } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ page: this.data.subAswData.length }); this.analysis(0); this.dateformat(this.data.startTime); }, //滑动切换参数设置 swiperTab: function (e) { var index = e.detail.current; this.analysis(index); this.setData({ currentTab: e.detail.current, chckTypeNum: this.data.subAswData[index].chckType }); }, //答案解析赋值 analysis:function(index){ this.data.analysisData[0].aswId = this.data.subAswData[index].aswId; this.data.analysisData[0].trueAsw = this.data.subAswData[index].trueAsw; this.data.analysisData[0].analysisTxt = this.data.subAswData[index].analysisTxt; this.setData({ analysisData: this.data.analysisData }); }, //查看答案解析 actionSheetTap: function () { this.setData({ actionSheetHidden: !this.data.actionSheetHidden }) }, //单选赋值 radioChange:function(e){ var idx = e.currentTarget.dataset.idx; var item = this.data.subAswData[idx].aswItem; this.data.subAswData[idx].answerCenter = e.detail.value; for(var i=0;i<item.length;i++){ if (item[i].value == e.detail.value){ item[i].checked = true; } } }, //多选赋值 checkboxChange: function (e) { var idx = e.currentTarget.dataset.idx; var item = this.data.subAswData[idx].aswItem; var values = e.detail.value; var strValue=""; for (var i = 0; i < item.length; i++) { item[i].checked = false; if(values.length>0){ for(var j=0;j<values.length;j++){ if (values[j] == item[i].value){ item[i].checked = true; strValue += (j == 0 ? item[i].value :','+item[i].value); } } } } this.data.subAswData[idx].answerCenter = strValue; }, //简答题赋值 bindTextAreaBlur: function (e) { var idx = e.currentTarget.dataset.idx; this.data.subAswData[idx].answerCenter = e.detail.value; }, //提交答卷 subAswData:function(){ var data = this.data.subAswData; var allNum=this.data.subAswData.length; var noNum=0; clearInterval(this.data.setInter);//清除定时器 for(var i=0;i<allNum;i++){ if(!data[i].answerCenter){ noNum+=1; } } wx.navigateTo({ url: '/pages/examAfter/examAfter?subAswData=' + JSON.stringify(data) + '&allNum=' + allNum + "&noNum=" + noNum }) }, // 时间格式转换 dateformat: function(micro) { var that=this; var userTimes = micro * 60 * 1000;//总的秒数 var now = new Date().getTime();//现在的时间 var endTime = now + userTimes;//结束的时间 that.data.setInter = setInterval(function () { countdown(endTime); }, 100); //倒计时的时间 function countdown(endTime) { var nowTime = new Date().getTime(); var chaTime = endTime - nowTime; //倒计时的时间 if (chaTime >= 0) { var m = Math.floor(chaTime / 1000 / 60); var s = Math.floor(chaTime / 1000 % 60); } s = s || 0; var time = (m > 9 ? m : "0" + m) + ":" + (s > 9 ? s : "0" + s); that.setData({ currentTime: time }); if (m == 0 && s == 0) { wx.showModal({ title: '提示', content: '考试时间结束，请提交答卷!选择取则清除答题结果！', success: function (res) { if (res.confirm) { that.subAswData(); } else if (res.cancel) { console.log('用户点击取消') } } }) clearInterval(that.data.setInter); return false; } } } }) （2）提交答卷 <!--pages/examAfter/examAfter.wxml--> <view class="testDetail"> <view class="imgBox"> <image src="/images/no-file01.png" style="width:100px;height:100px;"/> <label>共{{allNum}}道题，还有{{noNum}}道未作答</label> </view> <view class="testBtn"> <view class="select-cart cartBtn L" bindtap="lookCard">查看答题卡</view> <view bindtap='subAswData' class="submit-cart cartBtn R">交卷</view> </view> </view> /* pages/examAfter/examAfter.wxss */ .testDetail{clear: both;font-size: 14px;padding: 10px 20px;} .testDetail .imgBox{clear: both; text-align: center;overflow: hidden; padding-top: 50px; line-height: 30px;} .testDetail .imgBox image{margin: 0 auto; display: block;} .testDetail .testBtn{clear: both; padding-top: 40px;} .testDetail .testBtn .cartBtn{width: 49%;height: 55px;line-height: 55px;text-align: center;border-radius: 4px} .testDetail .testBtn .select-cart{border:1px solid #E6E6E6;color: #2F99EB;float: left;} .testDetail .testBtn .submit-cart{background: #2F99EB;color: #fff;float: right;} // pages/examAfter/examAfter.js Page({ /** * 页面的初始数据 */ data: { allNum:0,//试题总数 noNum: 0,//未做试题总数 subAswData:"" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ allNum: options.allNum, noNum: options.noNum, subAswData: options.subAswData }); }, //查看答题卡 lookCard: function () { wx.navigateTo({ url: '/pages/aswCard/aswCard?subAswData=' + JSON.stringify(this.data.subAswData) + '&allNum=' + this.data.allNum + "&noNum=" + this.data.noNum }) }, //交卷 subAswData: function () { wx.navigateTo({ url: '/pages/examAfterTip/examAfterTip?subAswData=' + JSON.stringify(this.data.subAswData) }) } }) （3）答题卡 <!--pages/aswCard/aswCard.wxml--> <view class="TestBox"> <view class="accuracyBox"> <view class='cardTip'> 色卡提示：<text class='tip tip1'></text>未做<text>{{aswNo}}</text>道题 <text class='tip tip2'></text>已做<text>{{aswYes}}</text>道题 </view> <view class="testTit"><text></text>单项选择题</view> <view class="cartNum"> <block wx:for="{{subAswData}}"> <block wx:if="{{item.chckType=='1'}}"> <view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view> </block> </block> </view> <view class="testTit"><text></text>多项选择题</view> <view class="cartNum"> <block wx:for="{{subAswData}}"> <block wx:if="{{item.chckType=='2'}}"> <view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view> </block> </block> </view> <view class="testTit"><text></text>简答题</view> <view class="cartNum"> <block wx:for="{{subAswData}}"> <block wx:if="{{item.chckType=='3'}}"> <view class="test-num {{!item.answerCenter? '':'true'}} L">{{index+1}}</view> </block> </block> </view> </view> <view class="cartBtnBox"> <view bindtap='returnBackAsw' class="continue-btn continue-btn1">继续练习</view> <view bindtap='subAswData' class="continue-btn continue-btn2">交卷</view> </view> </view> /* pages/aswCard/aswCard.wxss */ .TestBox{padding: 10px 20px;font-size: 14px;} .cardTip{padding: 10px 0;clear: both; color: #999; line-height: 20px;} .cardTip text{color: #2F99EB;} .cardTip .tip{display: inline-block;width: 12px;height: 12px;border-radius: 50%;} .cardTip .tip1{border:1px solid #ccc;} .cardTip .tip2{border:1px solid #40D496;background: #40D496; margin-left: 20px;} .TestBox .testTit{clear: both;overflow: hidden;font-size: 18px;color: #333; padding: 10px 0;} .TestBox .testTit label{border: 2px solid #2F99EB;margin-right: 15px;} .TestBox .cartNum{clear: both;overflow: hidden;font-size: 16px;} .TestBox .cartNum .test-num{border: 1px solid #ccc;width: 30px;height: 30px;line-height: 30px; text-align: center;border-radius: 50%;color: #2F99EB;float: left; margin: 5px;} .TestBox .cartNum .test-num.yes{background: #2F99EB;color: #fff;border: 1px solid #2F99EB;} .TestBox .cartNum .test-num.true{background: #40D496;color: #fff;border: 1px solid #40D496;} .TestBox .cartNum .test-num.error{background: #FC5D5A;color: #fff;border: 1px solid #FC5D5A;} .TestBox .cartBtnBox{clear: both;padding: 10px 0;} .TestBox .cartBtnBox .continue-btn{color: #fff;background: #2F99EB;height: 50px;line-height: 50px;text-align: center; width: 45%;} .TestBox .continue-btn1{float: left;} .TestBox .continue-btn2{float: right;} // pages/aswCard/aswCard.js Page({ /** * 页面的初始数据 */ data: { aswYes:0,//已做题数 aswNo:0,//未做题数 subAswData:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var noNum = options.noNum;//未做试题总数; var yesNum = options.allNum - noNum;//已做题总数 var dataList = JSON.parse(JSON.parse(options.subAswData)); this.setData({ aswYes: yesNum, aswNo: noNum, subAswData: dataList }); }, //继续学习 returnBackAsw:function(){ wx.navigateBack({ delta: 2 }) }, subAswData:function(){ wx.navigateTo({ url: '/pages/examAfterTip/examAfterTip?subAswData=' + JSON.stringify(JSON.stringify(this.data.subAswData)) }) } }) (4)提交答卷后 <!--pages/examAfterTip/examAfterTip.wxml--> <view class="TestBox"> <view class="accuracyBox"> <view class="tureBox"> <text class="truelv">正确率</text> <label><text>{{aswAccNum}}</text>%</label> </view> <view class='cardTip'> <view> 正确率只针对选择题，色卡标注：<text class='tip tip1'></text>正确<text>{{aswTrue}}</text>道题 <text class='tip tip2'></text>错误<text>{{aswFalse}}</text>道题（包含未做） </view> <view> 简答题请参考答案评分，色卡标注：<text class='tip tip3'></text>已做<text>{{aswYes}}</text>道题 <text class='tip tip4'></text>未做<text>{{aswNo}}</text>道题 </view> </view> <view class="testTit"><text></text>单项选择题</view> <view class="cartNum"> <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}"> <block wx:if="{{item.chckType=='1'}}"> <view class="test-num {{item.trueAsw==item.answerCenter? 'true':'error'}} L">{{index+1}}</view> </block> </block> </view> <view class="testTit"><text></text>多项选择题</view> <view class="cartNum"> <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}"> <block wx:if="{{item.chckType=='2'}}"> <view class="test-num {{item.trueAsw==item.answerCenter? 'true':'error'}} L">{{index+1}}</view> </block> </block> </view> <view class="testTit"><text></text>简答题</view> <view class="cartNum"> <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}"> <block wx:if="{{item.chckType=='3'}}"> <view class="test-num {{!item.answerCenter? '':'yes'}} L">{{index+1}}</view> </block> </block> </view> </view> <view class="cartBtnBox"> <view bindtap='examAnalysisAll' class="continue-btn continue-btn1">查看全部解析</view> <view bindtap='examAnalysis' class="continue-btn continue-btn2">查看错题解析</view> </view> <view class="cartBtnBox"> <button type='primary'>保存做题结果</button> </view> </view> /* pages/examAfterTip/examAfterTip.wxss */ .TestBox{padding: 10px 20px;font-size: 14px;} .cardTip{ background-color:#f8f3ed;padding: 10px;line-height: 25px; color: #666; margin-top: 10px;} .cardTip view{padding-bottom: 10px;} .cardTip text{color: #2F99EB;} .cardTip .tip{display: inline-block;width: 12px;height: 12px;border-radius: 50%;} .cardTip .tip1{border:1px solid #40D496;background: #40D496;} .cardTip .tip2{border:1px solid #FC5D5A;background: #FC5D5A; margin-left: 5px;} .cardTip .tip3{border:1px solid #2F99EB;background: #2F99EB;} .cardTip .tip4{border:1px solid #ccc; margin-left: 5px;} .TestBox .tureBox{width: 100px;height: 100px;border:1px solid #E6E6E6;border-radius: 50%;text-align: center;font-size: 16px;color: #A3A3A3; margin: 0 auto; margin-top: 30px;} .TestBox .tureBox .truelv{display: block;padding-top: 30px;} .TestBox .testTit{clear: both;overflow: hidden;font-size: 18px;color: #333; padding: 10px 0;} .TestBox .testTit label{border: 2px solid #2F99EB;margin-right: 15px;} .TestBox .cartNum{clear: both;overflow: hidden;font-size: 16px;} .TestBox .cartNum .test-num{border: 1px solid #ccc;width: 30px;height: 30px;line-height: 30px; text-align: center;border-radius: 50%;color: #2F99EB;float: left; margin: 5px;} .TestBox .cartNum .test-num.yes{background: #2F99EB;color: #fff;border: 1px solid #2F99EB;} .TestBox .cartNum .test-num.true{background: #40D496;color: #fff;border: 1px solid #40D496;} .TestBox .cartNum .test-num.error{background: #FC5D5A;color: #fff;border: 1px solid #FC5D5A;} .TestBox .cartBtnBox{clear: both;padding: 10px 0;} .TestBox .cartBtnBox .continue-btn{color: #fff;background: #2F99EB;height: 50px;line-height: 50px;text-align: center; width: 45%;} .TestBox .continue-btn1{float: left;} .TestBox .continue-btn2{float: right;} // pages/examAfterTip/examAfterTip.js Page({ /** * 页面的初始数据 */ data: { subAswData:[],//试题数据 aswFalse: 0,//错误选择题数 aswTrue: 0,//正确选择题数 aswAccNum: 0,//正确率 aswYes: 0,//已做简答题数 aswNo: 0,//未做简答题数 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var dataList = JSON.parse(JSON.parse(options.subAswData)); var aswFalse=0,aswTrue=0,aswAllNum=0,aswYes=0,aswNo = 0, aswAccNum=0; for(var i=0;i<dataList.length;i++){ if (dataList[i].chckType == 1 || dataList[i].chckType == 2){//选择题计算 aswAllNum+=1; if (dataList[i].trueAsw == dataList[i].answerCenter){ aswTrue += 1; } else{ aswFalse += 1; } } else{//简答题计算 if (!!dataList[i].answerCenter){ aswYes+=1; } else{ aswNo+=1; } } } aswAccNum = (aswTrue / aswAllNum)*100; this.setData({ aswFalse: aswFalse,//错误选择题数 aswTrue: aswTrue,//正确选择题数 aswAccNum: aswAccNum,//总选择题数 aswYes: aswYes,//已做简答题数 aswNo: aswNo,//未做简答题数 subAswData: dataList }); }, //查看全部试题解析 examAnalysisAll:function(){ wx.navigateTo({ url: '/pages/examAnalysisAll/examAnalysisAll?subAswData=' + JSON.stringify(this.data.subAswData) }) }, //查看错题解析 examAnalysis: function () { wx.navigateTo({ url: '/pages/examAnalysis/examAnalysis?subAswData=' + JSON.stringify(this.data.subAswData) }) } }) （5）答案解析 <!--pages/examAnalysisAll/examAnalysisAll.wxml--> <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}"> <view class='exasw-com'> <view class="cont-tit"> <view class="L" wx:if="{{item.chckType==1}}">单项选择</view> <view class="L" wx:if="{{item.chckType==2}}">多项选择</view> <view class="L" wx:if="{{item.chckType==3}}">简单题</view> </view> <view class='exam-com'> <view class='exam-title'> {{item.aswTitle}}<text> {{item.aswType}}</text> </view> <block wx:if="{{item.chckType==1}}"> <radio-group class="radio-group"> <label class="radio change-item" wx:for="{{item.aswItem}}" wx:for-item="item2"> <radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}} </label> </radio-group> </block> <block wx:if="{{item.chckType==2}}"> <checkbox-group class="checkbox-group"> <label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:for-item="item2"> <checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}} </label> </checkbox-group> </block> <view class='exam-bottom'> <view class='exam-bootom-txt'> <view wx:if="{{item.chckType==3}}"> 您的答案：<text class='exam-you'>未填写</text> </view> <view wx:else> 正确答案：<text class='exam-yes'>{{item.trueAsw}}</text> 您的答案：<text class='exam-you'>{{item.answerCenter}}</text> </view> </view> <view class='exam-bootom-tip'> <text>答案解析：</text> <label>{{item.analysisTxt}}</label> </view> </view> </view> </view> </block> /* pages/examAnalysisAll/examAnalysisAll.wxss */ .L,.R,.fl,.fr{display:inline;} .L ,.fl{float:left;} .R ,.fr{float:right;} .aswNum{text-align: right;} .exasw-com{padding: 10px 20px;} .cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;} .cont-tit text{font-size: 20px;font-weight: bold;color: #2F99EB;} .cont-tit view{width: 49%;} .asw-box{ font-size: 14px;} .exam-com{clear: both; padding-top: 10px;} .exam-title{color: #333;line-height: 25px;} .exam-title text{font-size: 12px;color: #999;} .change-radio,.change-item{display: block;clear: both; padding: 5px 10px } .exam-bottom{font-size: 14px;color: #666;} .exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;} .exam-bootom-txt text{font-weight: bold; padding-right: 20px;} .exam-bootom-txt .exam-yes{color: #00CC00;} .exam-bootom-txt .exam-you{color: #f00;} .exam-bootom-tip{clear: both;} .exam-bootom-tip text{font-weight: bold; font-size: 14px;} .exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;} // pages/examAnalysisAll/examAnalysisAll.js Page({ /** * 页面的初始数据 */ data: { page: 0, chckTypeNum: 1, subAswData: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var dataList = JSON.parse(options.subAswData); this.setData({ subAswData: dataList, page: dataList.length }); }, }) （6）错题解析 <!--pages/examAnalysis/examAnalysis.wxml--> <view class='exasw-com'> <view wx:if="{{page>0}}"> <view class="cont-tit"> <view class="L"> <label wx:if="{{chckTypeNum=='1'}}"> 单项选择 </label> <label wx:if="{{chckTypeNum=='2'}}"> 多项选择 </label> <label wx:if="{{chckTypeNum=='3'}}"> 简答题 </label> </view> <view class="R aswNum"><text>{{currentTab+1}}</text>/{{page}}</view> </view> <swiper current="{{currentTab}}" duration="300" class='asw-box' bindchange="swiperTab" style='min-height:600px;'> <block wx:for="{{subAswData}}" wx:key="{{subAswData.aswId}}" wx:for-index="indnum"> <swiper-item> <view class='exam-com'> <view class='exam-title'> {{item.aswTitle}}<text> {{item.aswType}}</text> </view> <block wx:if="{{item.chckType==1}}"> <radio-group class="radio-group"> <label class="radio change-item" wx:for="{{item.aswItem}}" wx:for-item="item2"> <radio value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}" />{{item2.text}} </label> </radio-group> </block> <block wx:if="{{item.chckType==2}}"> <checkbox-group class="checkbox-group"> <label class="checkbox change-item" wx:for-items="{{item.aswItem}}" wx:for-item="item2"> <checkbox value="{{item2.value}}" name="{{item2.name}}" checked="{{item2.checked}}"/>{{item2.text}} </label> </checkbox-group> </block> <view class='exam-bottom'> <view class='exam-bootom-txt'> <view wx:if="{{item.chckType==3}}"> 您的答案：<text class='exam-you'>未填写</text> </view> <view wx:else> 正确答案：<text class='exam-yes'>{{item.trueAsw}}</text> 您的答案：<text class='exam-you'>{{item.answerCenter}}</text> </view> </view> <view class='exam-bootom-tip'> <text>答案解析：</text> <label>{{item.analysisTxt}}</label> </view> </view> </view> </swiper-item> </block> </swiper> </view> <view wx:else> 你真棒，没有错误喔！ </view> </view> /* pages/examAnalysis/examAnalysis.wxss */ .L,.R,.fl,.fr{display:inline;} .L ,.fl{float:left;} .R ,.fr{float:right;} .aswNum{text-align: right;} .exasw-com{padding: 10px 20px;} .cont-tit{font-size: 14px;color: #666; padding-bottom: 5px; border-bottom: 1px solid #ccc;clear: both;overflow: hidden;} .cont-tit text{font-size: 20px;font-weight: bold;color: #2F99EB;} .cont-tit view{width: 49%;} .asw-box{ font-size: 14px;} .exam-com{clear: both; padding-top: 10px;} .exam-title{color: #333;line-height: 25px;} .exam-title text{font-size: 12px;color: #999;} .change-radio,.change-item{display: block;clear: both; padding: 5px 10px } .exam-bottom{font-size: 14px;color: #666;} .exam-bottom .exam-bootom-txt{clear: both;padding: 10px 0;} .exam-bootom-txt text{font-weight: bold; padding-right: 20px;} .exam-bootom-txt .exam-yes{color: #00CC00;} .exam-bootom-txt .exam-you{color: #f00;} .exam-bootom-tip{clear: both;} .exam-bootom-tip text{font-weight: bold; font-size: 14px;} .exam-bootom-tip label{padding:10px 0; text-indent: 10px;line-height: 25px;font-size: 12px; display: block;} // pages/examAnalysis/examAnalysis.js Page({ /** * 页面的初始数据 */ data: { currentTab: 0, page: 0, chckTypeNum: 1, subAswData: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var dataList = JSON.parse(options.subAswData); var errList=[]; for(var i=0;i<dataList.length;i++){ if (dataList[i].chckType == 1 || dataList[i].chckType == 2) {//筛选错题未做题 if (dataList[i].trueAsw == dataList[i].answerCenter) { } else { errList.push(dataList[i]); } } else{ if (!dataList[i].answerCenter){ errList.push(dataList[i]); } } } this.setData({ subAswData: errList, page: errList.length }); }, //滑动切换参数设置 swiperTab: function (e) { this.setData({ currentTab: e.detail.current, chckTypeNum: this.data.subAswData[e.detail.current].chckType }); } })