目录
连续完成单选题
1.新建了一个index1的页面
2.在index1.js里面添加题库数组
我这里在题库了添加了三道有关心理测试的题目
//题库
const titles = [{
title: '1.当周围嘈杂时，我很难专注于一项困难的任务',
options: [{
code: '1',
option: '几乎从不'
},
{
code: '2',
option: '有时'
},
{
code: '3',
option: '经常'
},
{
code: '4',
option: '总是'
}
]
},
{
title: '2. 当我需要专心和解决问题时，我很难集中注意力',
options: [{
code: '1',
option: '几乎从不'
},
{
code: '2',
option: '有时'
},
{
code: '3',
option: '经常'
},
{
code: '4',
option: '总是'
}
]
}, {
title: '3.当我正在努力做事时，仍会被周围的事情分心',
options: [{
code: '1',
option: '几乎从不'
},
{
code: '2',
option: '有时'
},
{
code: '3',
option: '经常'
},
{
code: '4',
option: '总是'
}
]
}
]3.显示题目
渲染传送数据
Page({
data:{
subject:null,
},
//一进页面就会执行的生命周期
onl oad() {
let subject=titles[0]
console.log('subject',subject)
this.setData({
subject:subject
})
},
radioChange(e){
console.log(e.detail.value)
}
})显示题目，并将选中的答案对应的值进行记录
<view>题目:</view>
<view>{{subject.title}}</view>
<radio-group bindchange="radioChange">
<view wx:for="{{subject.options}}" wx:key="index">
<radio value="{{item.code}}"/>
<text>{{item.option}}</text>
</view>
</radio-group>
<button type="primary" bindtap="next">下一题</button>效果图：
4.显示当前是第几题
题目上方添加布局和对应样式
<view class="tip">当前第{{current}}题/共3题</view>.tip{
text-align: center;
color: chocolate;
margin: 15rpx;
font-size: 42rpx;
}每点击一次下一题按钮，记录当前题数的current进行动态传值
点击了一次后的current,但题目还没发生变换
5.动态设置总题目数并实现动态换题
设置动态值total，同时给单选的属性checked设为动态值isSelect
<view class="tip">当前第{{current}}题/共{{total}}题</view>初始化动态值
total的动态值由题目的数组长度决定
如果到最后一个题了，给用户弹窗提示，且再执行换题操作。
换题操作实现起来也很简单，动态变化subject即可。
注意：每点击一次下一题按钮，单选的选择属性要设为false，否则回默认保存上一题的选择操作！
//切换到下一题
next() {
//切换显示第几题
let number = this.data.current+1
if(number>titles.length){
wx.showToast({
title: '已经是最后一题了',
icon:'none'
})
return //最后一道题时，不再往下执行了
}
//切换题目,注意数组下标从0开始
let subject = titles[number-1]
this.setData({
subject:subject,
current: number,
isSelect:false
})
}实现效果：
6.添加一个做题进度条
利用progress组件progress | 微信开放文档 (qq.com)
定义进度条的布局和样式
<progress class="pro" percent="{{percent}}" border-radius="20" stroke-width="20"></progress>.pro{
margin: 20rpx;
}初始化动态值percent后，进行动态传值
实现效果：
7.对用户选项进行判空
初始化用户的选择为空
如果没做选择，设置弹窗，并不再继续执行（写在next函数里的最前面）
//不做选择，就设置弹窗
let userChoose = this.data.userSelect
if (!userChoose) {
wx.showToast({
icon: 'error',
title: '请做选择',
})
return
}实现效果：
8.问卷计分
初始化用户得分userScore为0,用来累积用户得分
将用户选择转化对应的得分，并累加（这里把代码添加到了进度条这里）
//切换显示第几题并计分
let number = this.data.current + 1
let score = parseInt(userChoose) //将用户选择转为相应的得分
this.setData({
percent: ((number - 1) / titles.length) * 100,
userScore: this.data.userScore + score //得分累计
})
console.log('此题用户得分：', score)
console.log('用户总得分：', this.data.userScore)测试结果：
最后在用户答完最后一道题的时候，给一个总得分反馈。
换句话说，也就是说只有最后一道题答完才能出现总分，前面不能出现，所以我们需要用到wx:if，条件可以将totalScore的初始值设为-1，最后将累积的userScore赋值给totalScore，所以totalScore>-1时可见。
<view wx:if="{{totalScore>-1}}" class="defen">您的得分为：{{totalScore}}分</view>if (number > titles.length) {
//统计最终得分
this.setData({
totalScore:this.data.userScore
})
//给出最后一题的弹窗警告
wx.showToast({
title: '已经是最后一题了',
icon: 'none'
})
return //最后一道题时，不再往下执行了
}实现效果：