题库答题微信小程序案例源码-适用于表单提交

白云追赶着晚风，却让花朵羞红，溪水奔走于山峰，喧扰着自由的喜悦

我躺在彩虹的怀抱，陶醉在馥郁芬芳

你千万别像风，在我这里掀起万般波澜，却又跟云去了远方

这是一篇《微信小程序-超简单-处理Push新增数组和更新二维数组字段，Push返回对象为1》的续作；或者说他们最终是要实现题库答题微信小程序案例源码展示，前一篇提供了在开发过程中遇到问题学习方案。这篇则是学习成果

题库答题小程序和表单小程序概念基本是差不多的，无非是一个有上下题切换，另一个是上下滑动。他们的开发思路差距不大可以套用

功能

案例中源码核心功能在于

1. 本地数组记录做题答案
2. 上下题切换能记录之前数值
3. 上题可以实时更新选项

源码

若只想看下思路可以直接阅读js部分，需要整体案例在文章末尾下载

// index.js // 获取应用实例 const app = getApp() ​ Page({ data: { active: 0,//当前题目索引值 number: '',//总题目长度值 changeValue: '',//当前选择选项 frData: [],//记录题目选择数组 items: [//本地测题库 [{value: '《小王子》',checked: false,inds: 0}, {value: '《人间草木》',checked: false,inds: 1}, {value: '《致D》',checked: false,inds: 2}, ], [{value: '《从你的全世界而路过》',checked: false,inds: 0}, {value: '《云边有个小卖铺》',checked: false,inds: 1 }, { value: '《天堂旅行团》',checked: false,inds: 2}, ], [{ value: '《少有人走的人》',checked: false,inds: 0}, {value: '《他人的力量》',checked: false,inds: 1}, {value: '《我们总是孤独成长》',checked: false,inds: 2}, ] ] }, ​ onLoad() { // 获取题目数量 this.subject(); }, ​ // 获取题目数量 赋值给number subject() { this.setData({ number: this.data.items.length }) }, ​ // 下一题 nextPage() { if (this.data.active > this.data.number - 2) { wx.showToast({ title: '已是最后一题', icon: 'error', duration: 2000 }) } else { this.setData({ active: this.data.active + 1 }) } // 执行保存数据函数 this.pageFrData(); }, ​ // 上一题 uptPage() { if (this.data.active < this.data.number - 2) { wx.showToast({ title: '已是第一题', icon: 'error', duration: 2000 }) } else { this.setData({ active: this.data.active - 1, }) //获取之前选择的数值 var chan = this.data.frData[this.data.active].changeValue; if(chan != ''){ this.data.items[this.data.active][chan].checked = true this.setData({ items: this.data.items }) } } }, ​ // 获取选中数值 radioChange(e) { console.log('radio发生change事件，携带value值为：', e.detail.value) this.setData({ changeValue: e.detail.value }) ​ // 和之前数组对比查看是否存在 若有存在 则判断是否有更新选项 随后赋值 var indexLists = this.data.frData.find((item, index) => { return index == this.data.active; }) ​ if(indexLists != undefined){ if(this.data.frData[this.data.active].changeValue != this.data.changeValue){ this.data.frData[this.data.active].changeValue = this.data.changeValue console.log('复制一样',this.data.frData[this.data.active].changeValue,this.data.changeValue) this.setData({ frData:this.data.frData }) } } }, ​ // 当前选择保存到数组 pageFrData() { var date = { active: this.data.active, changeValue: this.data.changeValue }; ​ // 判断之前数组知否存在 如果存在则获取之前选择数值。若不存在则push数组 var indexLists = this.data.frData.find((item, index) => { return index == this.data.active; }) ​ if(indexLists == undefined){ this.data.frData.push(date); this.setData({ "frData": this.data.frData, changeValue: "" }) }else{ var chan = this.data.frData[this.data.active].changeValue; if(chan != ''){ this.data.items[this.data.active][chan].checked = true this.setData({ items: this.data.items }) } } } })

源码下载

https://yinfengrui.lanzoub.com/iVPnc0eacqkd