uniapp 使用swiper实现答题功能可以滑动查看已答问题但是不能滑动查看未答题请提供具体代码
以下是使用swiper实现答题功能的代码:
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div v-for="(question, index) in questions" :key="index" class="swiper-slide">
<h2>{{ question.title }}</h2>
<ul>
<li v-for="(option, i) in question.options" :key="i">
<input type="radio" :id="`option${i}`" :name="`question${index}`" :value="option" v-model="answers[index]">
<label :for="`option${i}`">{{ option }}</label>
</li>
</ul>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
export default {
data() {
return {
questions: [
{ title: 'Question 1', options: ['Option 1', 'Option 2', 'Option 3'] },
{ title: 'Question 2', options: ['Option 1', 'Option 2', 'Option 3'] },
{ title: 'Question 3', options: ['Option 1', 'Option 2', 'Option 3'] },
{ title: 'Question 4', options: ['Option 1', 'Option 2', 'Option 3'] },
{ title: 'Question 5', options: ['Option 1', 'Option 2', 'Option 3'] }
],
answers: []
}
},
mounted() {
const swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true
},
on: {
slideChange: () => {
if (swiper.activeIndex >= this.answers.length) {
this.answers.push(null)
}
}
}
})
}
}
</script>
在代码中,我们使用了swiper的滑动功能来实现答题页面的切换。对于未答题的问题,我们在滑动到它之前会自动添加一个null值到answers数组中,以保持和问题的数量一致。
你可以根据自己的需求修改questions数组来添加更多问题和选项,也可以在answers数组中保存用户的答案。
原文地址: https://www.cveoy.top/t/topic/bA8S 著作权归作者所有。请勿转载和采集!