123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import QuestionList from './components/QuestionList.vue';
|
||
import { ref, watch } from 'vue';
|
||
import { isDrag } from './hooks/useDragEvent';
|
||
const active = ref(0);
|
||
const total = ref(0);
|
||
const surveys = defineModel('surveys', { required: true });
|
||
function setActive(act: number, tol: number) {
|
||
active.value = act;
|
||
total.value = tol;
|
||
}
|
||
const swiper = ref();
|
||
const questionComat = ref();
|
||
function handleDragStart() {
|
||
isDrag.value = true;
|
||
}
|
||
watch(
|
||
() => active.value,
|
||
(value) => {
|
||
setTimeout(() => {
|
||
// 获取高度
|
||
swiper.value.$el.style.height = questionComat.value[value].$el.scrollHeight + 30 + 'px';
|
||
swiper.value.resize();
|
||
}, 500);
|
||
}
|
||
);
|
||
function slideChange() {
|
||
setTimeout(() => {
|
||
// 获取高度
|
||
swiper.value.$el.style.height = questionComat.value[active.value].$el.scrollHeight + 30 + 'px';
|
||
swiper.value.resize();
|
||
}, 500);
|
||
}
|
||
function handleDragEnd() {
|
||
isDrag.value = false;
|
||
// setTimeout(() => {
|
||
// // 获取高度
|
||
// swiper.value.$el.style.height = questionComat.value[active.value].$el.scrollHeight + 30 + 'px';
|
||
// swiper.value.resize();
|
||
// }, 500);
|
||
// swiper.value.height = questionList.value.;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="carousel-container">
|
||
<div class="title">
|
||
<span style="margin-top: 6px">我的任务</span>
|
||
<div class="carousel-indicators">
|
||
<i
|
||
v-for="(item, index) in total"
|
||
class="van-swipe__indicator"
|
||
:class="active === index ? 'van-swipe__indicator--active' : ''"
|
||
></i>
|
||
</div>
|
||
<!--分页器。如果放置在swiper外面，需要自定义样式。-->
|
||
</div>
|
||
<div>
|
||
<van-swipe :loop="false" @drag-start="handleDragStart" @drag-end="handleDragEnd" ref="swiper">
|
||
<van-swipe-item v-for="question in surveys" :key="question?.sn">
|
||
<question-list
|
||
@slideChange="slideChange"
|
||
:parentRef="swiper"
|
||
:survey="question"
|
||
style="max-width: 100vw; overflow: hidden"
|
||
ref="questionComat"
|
||
/>
|
||
</van-swipe-item>
|
||
<template #indicator="{ active, total }">
|
||
{{ setActive(active, total) }}
|
||
</template>
|
||
</van-swipe>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@use '@/assets/css/theme';
|
||
.carousel-indicators {
|
||
position: relative;
|
||
display: flex;
|
||
transform: translate(-50%);
|
||
}
|
||
.carousel-container {
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
margin-top: theme.$gap;
|
||
border-radius: theme.$card-radius;
|
||
padding: 10px;
|
||
position: relative;
|
||
|
||
.title {
|
||
color: black;
|
||
font-size: 15px;
|
||
font-family: PingFangSC-Heavy;
|
||
font-weight: 900;
|
||
line-height: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.carousel-item {
|
||
.swipe-container {
|
||
margin-top: theme.$gap;
|
||
border-radius: theme.$card-radius;
|
||
}
|
||
}
|
||
|
||
.slide-content {
|
||
height: 150px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
</style>
|