uniapp 使用 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>
<p>在代码中，我们使用了 swiper 的滑动功能来实现答题页面的切换。对于未答题的问题，我们在滑动到它之前会自动添加一个 null 值到 answers 数组中，以保持和问题的数量一致。</p>
<p>你可以根据自己的需求修改 questions 数组来添加更多问题和选项，也可以在 answers 数组中保存用户的答案。</p>