前面会有个首页，有个按钮是需要用户点击的，然后跳转到题目页，这个比较简单，就没有加上，我这个是一进入首页会有个背景音乐自动播放,另外一篇博客有实现（进入H5页面，音乐自动播放）
选择一个题是，自动进入到下一个题目，这里我没有加选择选项时的一个样式的变化。因为某些原因，这个背景图是临时网上随便找的来替换的。我这里只给了六个题目，下标小于题目个数时，下标+1,来控制题目得转换。后面的结果页，也是由判断得来得，判断一下当前下标是否跟题目得个数相同，如果相同则请求接口跳转到结果页，附上代码：
HTML代码
<view class="allQuestion">
<!-- 第一张图-->
<swiper :interval="1000" :duration="500" :current="curr_index" :disable-touch="true">
<swiper-item class="questionOne" v-for="(item,index1) in question" :key="index1">
<view class="questionOne-cont" :style="{
background:item.page}">
<!-- No.1图片 -->
<view class="questionOne-cont-pic">
<image :src="item.img" mode=""></image>
</view>
<!-- 问题 -->
<view class="questionOne-cont-top">
<view class="questionOne-cont-top-text">
<text>{
{item.title}}</text>
</view>
</view>
<!-- 选项 -->
<view class="questionOne-cont-chose" v-for="(an,index2) in item.answer" :key="index2">
<view class="questionOne-cont-chose-answer" :data-val="an.value" ref="dataVal" @click="chose($event)">
<text>{
{an.name}}</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
其中current属性是最重要的，控制着当前模块的下标，主要是靠它来切换题目页面的，题目切换事件我用的是swiper组件，swiper默认的就是左出右进，但是再下一个页面中可以滑动到上一个页面，这就不符合测试题的规范了，所以加个属性 disable-touch，设置为true，就是禁止用户滑动了。
JS代码：
export default {
data() {
return {
// 题目这些是写死的
question: [{
key: 1,
flage: false,
title: "参加全是陌生人的聚会，你会？",
img: "../../static/q1.png",
page: "url(../../static/1.jpg) top center/cover",
answer: [{
id: 0,
value: "N",
name: "A.在角落里一个人玩手机"
}, {
id: 1,
value: "N",
name: "B.观察一下，找到觉得合适的人聊天"
}, {
id: 2,
value: "Y",
name: "C.立即加入最活跃的一群，热烈谈话"
}]
},
{
key: 2,
flage: false,
title: "你喜欢的奶茶店新推出了一种口味，你会？",
img: "../../static/q2.png",
page: "url(../../static/2.jpg) top center/cover",
answer: [{
id: 0,
value: "Y",
name: "A.第一时间去尝鲜"
}, {
id: 1,
value: "N",
name: "B.看下别人的评价再决定是否购买"
}, {
id: 2,
value: "N",
name: "C.购买自己习惯的口味"
}]
},
{
key: 3,
flage: false,
title: "公司聚会一个你不认识的同事和你坐在一起，你会？",
img: "../../static/q3.png",
page: "url(../../static/3.jpg) top center/cover",
answer: [{
id: 0,
value: "Y",
name: "A.主动和他打招呼进行交谈"
}, {
id: 1,
value: "N",
name: "B.等着他主动和自己打招呼"
}, {
id: 2,
value: "N",
name: "C.自己吃自己的，不理他"
}]
},
{
key: 4,
flage: false,
title: "去逛街购物，你喜欢和朋友一起去还是自己？",
img: "../../static/q4.png",
page: "url(../../static/4.jpg) top center/cover",
answer: [{
id: 0,
value: "Y",
name: "A.当然是和朋友一起"
}, {
id: 1,
value: "N",
name: "B.喜欢自己一个人去"
}]
},
{
key: 5,
flage: false,
title: "一个人不开心的时候你会怎么做？",
img: "../../static/q5.png",
page: "url(../../static/5.jpg) top center/cover",
answer: [{
id: 0,
value: "Y",
name: "A.一个人跑去看电影"
}, {
id: 1,
value: "Y",
name: "B.一个人去KTV嗨歌"
}, {
id: 2,
value: "N",
name: "C.打电话给朋友"
}]
},
{
key: 6,
flage: false,
title: "你觉得自己是一个外向的人吗？",
img: "../../static/q6.png",
page: "url(../../static/6.jpg) top center/cover",
answer: [{
id: 0,
value: "Y",
name: "A.还算外向"
}, {
id: 1,
value: "N",
name: "B.一般"
}, {
id: 2,
value: "N",
name: "C.相对内向"
}]
}
],
curr_index: 0,
paramVal: [],
obj: {
},
}
},
onLoad() {
},
methods: {
// 题目改变
chose(e) {
this.paramVal.push(e.currentTarget.dataset.val)
let curr_index = this.curr_index; //0-第一页
if (curr_index < this.question.length) {
curr_index += 1; //1-第二页
}
// 改变下标来实现页面切换
this.curr_index = curr_index;
if (this.curr_index === this.question.length) {
uni.showLoading({
title: "查询结果中..."
})
this.resultPage();
}
},
// 结果请求接口
resultPage: function() {
// 我的请求参数是{"questionOne": "N","questionTwo": "N",.......}这种形式，就转换了一下
let [questionOne, questionTwo, questionThree, questionFour, questionFive, questionSix] = this.paramVal
this.obj = {
questionOne,
questionTwo,
questionThree,
questionFour,
questionFive,
questionSix
}
console.log(this.obj)
this.obj = JSON.stringify((this.obj))
uni.request({
url: '接口地址',
method: 'post',
header: {
'content-type': 'application/json'
},
data: this.obj,
success(res) {
if (res.data.code == 0) {
uni.setStorageSync('resultData', res.data.data);
setTimeout(() => {
uni.hideLoading()
}, 300)
setTimeout(() => {
// 放的跳转页面
// uni.redirectTo({
// url: '../endPage/endPage'
// })
},500)
}else{
uni.showToast({
title:"执行错误",
icon:'none',
duration:2000
})
}
}
});
}
}
}
CSS代码：
<style lang="scss" scoped>
.allQuestion {
>uni-swiper {
height: 99.8vh !important;
}
}
.questionOne {
&-cont {
padding: 78upx 60upx 0 70upx;
height: 94vh;
&-pic {
margin-bottom: 8upx;
>image {
width: 158upx;
height: 92upx;
}
}
&-top {
padding-left: 2upx;
&-text {
width: 666upx;
font-size: 44upx;
font-weight: 600;
color: #935217;
line-height: 60upx;
>text {
box-shadow: 0 -7px #ffe26c inset;
}
}
}
&-chose:nth-child(2) {
padding-top: 10upx;
}
}
}
</style>
当然还有一些题目选项的公共样式
page {
font-family: PingFangSC, PingFangSC-Semibold;
}
.questionOne-cont {
padding: 78upx 60upx 0 70upx;
}
.questionOne-cont-pic {
margin-bottom: 8upx;
> image {
width: 158upx;
height: 92upx;
}
}
.questionOne-cont-chose {
padding-top: 50upx;
}
.questionOne-cont-chose-answer {
background: url(/static/an.png) top center/cover;
height: 88upx;
width: 596upx;
line-height: 76upx;
> text {
width: 176upx;
height: 44upx;
font-size: 32upx;
font-weight: 600;
color: #955217;
line-height: 46upx;
margin-left: 36upx;
}
}
是不是很简单啊