uniapp实现翻页式问卷调查：滑动切换上一页

实现翻页式问卷调查可以使用uniapp提供的swiper组件，结合条件渲染来实现滑动切换到上一页。

具体代码如下：

<template>
  <view class='container'>
    <swiper :current='current' :duration='300' :autoplay='false' @change='swiperChange'>
      <swiper-item v-for='(question, index) in questions' :key='index'>
        <view class='question'>
          <h3>{{ question.title }}</h3>
          <div v-if='question.type === 'single''>
            <radio-group v-model='question.answer' class='radio-group'>
              <label v-for='(option, index) in question.options' :key='index' class='radio'>
                <radio :value='option'>{{ option }}</radio>
                <span>{{ option }}</span>
              </label>
            </radio-group>
          </div>
          <div v-else-if='question.type === 'multiple''>
            <checkbox-group v-model='question.answer' class='checkbox-group'>
              <label v-for='(option, index) in question.options' :key='index' class='checkbox'>
                <checkbox :value='option'>{{ option }}</checkbox>
                <span>{{ option }}</span>
              </label>
            </checkbox-group>
          </div>
          <div v-else-if='question.type === 'text''>
            <textarea class='textarea' v-model='question.answer'></textarea>
          </div>
          <div class='btn-group'>
            <button class='prev' v-if='current > 0' @click='prev'>上一页</button>
            <button class='next' v-if='current < questions.length - 1' @click='next'>下一页</button>
            <button class='submit' v-else @click='submit'>提交</button>
          </div>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      questions: [
        {
          title: '你喜欢什么颜色？',
          type: 'single',
          options: ['红色', '绿色', '蓝色', '黄色'],
          answer: ''
        },
        {
          title: '你喜欢哪种食物？',
          type: 'multiple',
          options: ['中餐', '西餐', '日餐', '韩餐'],
          answer: []
        },
        {
          title: '你最喜欢的电影是？',
          type: 'text',
          answer: ''
        }
      ]
    }
  },
  methods: {
    next() {
      this.current++
    },
    prev() {
      this.current--
    },
    submit() {
      // 提交答案
    },
    swiperChange(e) {
      this.current = e.detail.current
    }
  }
}
</script>

<style>
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.question {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.radio,
.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.prev,
.next,
.submit {
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  color: #fff;
  background-color: #007aff;
  font-size: 16px;
  outline: none;
}
.prev:hover,
.next:hover,
.submit:hover {
  background-color: #0a84ff;
}
.prev {
  margin-right: 10px;
}
.textarea {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  resize: none;
}
</style>

以上代码实现了一个简单的翻页式问卷调查，使用swiper组件实现滑动切换到上一页。其中，questions数组存储了问题的数据，current表示当前页码，next、prev、submit方法用来切换页面和提交答案，swiperChange方法用来监听swiper组件的change事件。具体效果可以在uniapp中预览。