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中预览。
原文地址: https://www.cveoy.top/t/topic/bA3T 著作权归作者所有。请勿转载和采集!