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

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

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

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

这是一篇《微信小程序-超简单-处理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