最近做项目碰到这样一个需求,当当前题目没答的时候,不能进入下一题,而我用的组件是swiper,swiper没有类似阻止滑动的属性,于是只能自己想了.......问题的解决思路就是动态渲染题目,并且过滤掉第一道题,当第一道题答完才渲染第二道题,以此类推,直至渲染全部题目,我们可以采用vue的计算属性,动态渲染题目
computed: {
answeredSubject() {
// 根据答案列表过滤出已答题目,从第二道题开始,跳过第一道题
return this.subject.filter((item, index) => index === 0 || !!this.answerlist[index - 1]);
},
},
完整代码如下
<template>
<view class="content">
<!-- swiper整屏滑动-->
<swiper :vertical="true" class="swiper" :current="activeIndex" @change="swiperChange">
<swiper-item class="swiper-item" v-for="(item,index) in answeredSubject" :key="index">
<view style="padding: 32rpx">
<view class="title">{{ item.title }}</view>
<view class="option A" :class=" answerlist[index] == 'A'? 'selected':'' " @click="answer(index,'A')">
{{ item.one }}
</view>
<view style="width: 400rpx;height: 700rpx;"></view>
<view class="option B" :class="answerlist[index] == 'B'? 'selected':'' " @click="answer(index,'B')">
{{ item.two }}
</view>
</view>
<view class="footer">向上滑動</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
subject: [
{
no: 1,
title: '(1/12)美食展會上,路人手上的美食吸引了你,你會?',
one: 'A.攔住路人問出是哪家店',
two: 'B.記住食物的樣子逐個攤位尋找',
},
{
no: 2,
title: '(2/12)你的朋友突然說要去吃火鍋,你會?',
one: 'A.立刻跟著朋友去',
two: 'B.先去看看有沒有其他更好吃的',
},
{
no: 3,
title: '(3/12)你的朋友突然說要去吃火鍋,你會?',
one: 'A.立刻跟著朋友去',
two: 'B.先去看看有沒有其他更好吃的',
},
{
no: 4,
title: '(4/12)你的朋友突然說要去吃火鍋,你會?',
one: 'A.立刻跟著朋友去',
two: 'B.先去看看有沒有其他更好吃的',
},
{
no: 5,
title: '(5/12)你的朋友突然說要去吃火鍋,你會?',
one: 'A.立刻跟著朋友去',
two: 'B.先去看看有沒有其他更好吃的',
},
],
activeIndex: 0,//当前显示的swiper索引
answerlist: [
]
}
},
computed: {
answeredSubject() {
// 根据答案列表过滤出已答题目,从第二道题开始,跳过第一道题
return this.subject.filter((item, index) => index === 0 || !!this.answerlist[index - 1]);
},
},
onLoad() {
console.log(this.answeredSubject)
},
methods: {
answer(index, selectedOption) {
// 填充答案列表,确保答案与题目一一对应
while (this.answerlist.length <= index) {
this.answerlist.push(null); // 填充空答案
}
// 更新用户的答案
this.answerlist[index] = selectedOption;
this.$forceUpdate();//强制刷新视图
// 输出答案列表,用于调试
console.log(this.answerlist);
console.log(this.answeredSubject,'123123')
// 在这里可以执行下一题的逻辑,例如滑动到下一题
// 示例代码:this.swiper.slideTo(index + 1); // 假设您有一个名为 swiper 的 swiper 实例
},
swiperChange(e) {
this.activeIndex = e.detail.current
}
}
}
</script>
<style lang="scss">
.content {
width: 100%;
height: 100vh;
.swiper {
width: 100%;
height: 100vh;
.swiper-item {
width: 100%;
height: 100vh;
.title {
font-size: 40rpx;
margin-top: 80px;
}
.option {
font-size: 35rpx;
margin-top: 40rpx;
}
.selected {
color: #007aff;
}
.A {
float: left;
}
.B {
float: right;
}
.footer {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 20rpx 40rpx;
border-radius: 10rpx;
animation: slide-up 1.5s infinite alternate;
}
@keyframes slide-up {
0% {
transform: translateX(-50%) translateY(0);
}
100% {
transform: translateX(-50%) translateY(-40rpx);
}
}
}
}
}
</style>