feat(YlSwiper): 添加自动高度调整功能

- 在 YlSwiper 组件中添加 autoHeight 属性,使轮播图高度能根据内容自动调整
- 在 MineTask 组件中应用该功能,解决任务列表高度适配问题
- 优化 Index.vue 中的代码,增加对 active 值变化的监听,动态调整轮播图高度
This commit is contained in:
陈昱达
2025-05-26 17:17:06 +08:00
parent beb74bb3b0
commit 03c9154602
4 changed files with 28 additions and 6 deletions

View File

@@ -168,6 +168,7 @@ defineExpose({
<!-- :navigation="navigationConfig" --> <!-- :navigation="navigationConfig" -->
<swiper-container <swiper-container
ref="swiperRef" ref="swiperRef"
:autoHeight="true"
:slides-per-view="slidesPerView" :slides-per-view="slidesPerView"
:space-between="spaceBetween" :space-between="spaceBetween"
:centered-slides="centeredSlides" :centered-slides="centeredSlides"

View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import QuestionList from './components/QuestionList.vue'; import QuestionList from './components/QuestionList.vue';
import { ref } from 'vue'; import { ref, watch } from 'vue';
import { isDrag } from './hooks/useDragEvent'; import { isDrag } from './hooks/useDragEvent';
const active = ref(0); const active = ref(0);
const total = ref(0); const total = ref(0);
@@ -9,13 +9,29 @@ function setActive(act: number, tol: number) {
active.value = act; active.value = act;
total.value = tol; total.value = tol;
} }
const swiper = ref();
const questionComat = ref();
function handleDragStart() { function handleDragStart() {
isDrag.value = true; 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 handleDragEnd() { function handleDragEnd() {
isDrag.value = false; 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> </script>
@@ -33,9 +49,13 @@ function handleDragEnd() {
<!--分页器如果放置在swiper外面需要自定义样式--> <!--分页器如果放置在swiper外面需要自定义样式-->
</div> </div>
<div> <div>
<van-swipe :loop="false" @drag-start="handleDragStart" @drag-end="handleDragEnd"> <van-swipe :loop="false" @drag-start="handleDragStart" @drag-end="handleDragEnd" ref="swiper">
<van-swipe-item v-for="question in surveys" :key="question?.sn"> <van-swipe-item v-for="question in surveys" :key="question?.sn">
<question-list :survey="question" style="max-width: 100vw; overflow: hidden" /> <question-list
:survey="question"
style="max-width: 100vw; overflow: hidden"
ref="questionComat"
/>
</van-swipe-item> </van-swipe-item>
<template #indicator="{ active, total }"> <template #indicator="{ active, total }">
{{ setActive(active, total) }} {{ setActive(active, total) }}

View File

@@ -38,6 +38,7 @@ const disableInsight = ref(true);
:centered-slides="true" :centered-slides="true"
:navigation="!isDrag" :navigation="!isDrag"
:loop="false" :loop="false"
:autoHeight="true"
:space-between="0" :space-between="0"
:allow-touch-move="false" :allow-touch-move="false"
> >

View File

@@ -66,7 +66,7 @@ const showChart = ref([1, 2, 5, 106, 9, 10]);
// 接受上级传递的 questionAnalysis 数据 // 接受上级传递的 questionAnalysis 数据
const questionAnalysis = defineModel<any[]>('questionAnalysis'); const questionAnalysis = defineModel<any[]>('questionAnalysis');
const parentIndex = defineModel<any[]>('parentIndex'); const parentIndex = defineModel<any>('parentIndex');
const { width } = screenLayout(); const { width } = screenLayout();