uniapp 实现翻页式问卷调查 - 代码示例

以下是一个简单的实现翻页式问卷调查的 Uniapp 代码示例：

<template>
  <view class='container'>
    <swiper :current='current' @change='handleChange' :duration='500'>
      <swiper-item v-for='(page, index) in pages' :key='index'>
        <view class='page'>
          <view class='question'>{{ page.question }}</view>
          <view class='options'>
            <radio-group v-model='page.answer'>
              <radio v-for='(option, i) in page.options' :key='i' :value='option'>{{ option }}</radio>
            </radio-group>
          </view>
          <view class='nav-buttons'>
            <button v-if='index > 0' class='prev-button' @tap='prevPage'>上一页</button>
            <button v-if='index < pages.length - 1' class='next-button' @tap='nextPage'>下一页</button>
            <button v-if='index === pages.length - 1' class='submit-button' @tap='submit'>提交</button>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        pages: [
          {
            question: '问题 1',
            options: ['选项 1', '选项 2', '选项 3'],
            answer: ''
          },
          {
            question: '问题 2',
            options: ['选项 1', '选项 2', '选项 3'],
            answer: ''
          },
          {
            question: '问题 3',
            options: ['选项 1', '选项 2', '选项 3'],
            answer: ''
          }
        ]
      }
    },
    methods: {
      handleChange(event) {
        this.current = event.detail.current
      },
      prevPage() {
        this.current -= 1
      },
      nextPage() {
        this.current += 1
      },
      submit() {
        // 提交调查问卷的代码
      }
    }
  }
</script>

<style>
  .container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .question {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
  }
  .nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .prev-button,
  .next-button,
  .submit-button {
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid #333;
    background-color: #fff;
    color: #333;
  }
  .prev-button:hover,
  .next-button:hover,
  .submit-button:hover {
    background-color: #333;
    color: #fff;
  }
  .prev-button:disabled,
  .next-button:disabled {
    opacity: 0.5;
  }
</style>

这个示例使用了 swiper 组件来实现页面的滑动切换，通过绑定 current 属性实现页面的切换。每个页面都包含一个问题和选项，用户可以选择其中一个选项，然后点击上一页或下一页按钮切换到上一页或下一页。当用户到达最后一页时，会显示一个提交按钮，用户可以点击该按钮提交问卷。