实现翻页式问卷调查可以使用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中预览。

uniapp 怎么实现翻页式问卷调查可以滑动切换到上一页请提供具体代码

原文地址: https://www.cveoy.top/t/topic/bA3T 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录