feat(YlSwiper): 添加自动高度调整功能
- 在 YlSwiper 组件中添加 autoHeight 属性,使轮播图高度能根据内容自动调整 - 在 MineTask 组件中应用该功能,解决任务列表高度适配问题 - 优化 Index.vue 中的代码,增加对 active 值变化的监听,动态调整轮播图高度
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
@@ -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) }}
|
||||||
|
|||||||
@@ -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"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user