feat(MineTask): 添加问卷滑动切换功能
- 在 QuestionList 组件中添加 slideChange 事件监听 - 在 MineTask 组件中实现 slideChange 方法,调整滑动后问卷区域高度 -通过自定义事件和回调函数实现问卷页滑动切换时的高度自适应
This commit is contained in:
@@ -24,6 +24,15 @@ watch(
|
||||
}, 500);
|
||||
}
|
||||
);
|
||||
function slideChange() {
|
||||
console.log(1);
|
||||
setTimeout(() => {
|
||||
console.log(swiper.value.$el.style.height);
|
||||
// 获取高度
|
||||
swiper.value.$el.style.height = questionComat.value[active.value].$el.scrollHeight + 30 + 'px';
|
||||
swiper.value.resize();
|
||||
}, 500);
|
||||
}
|
||||
function handleDragEnd() {
|
||||
isDrag.value = false;
|
||||
// setTimeout(() => {
|
||||
@@ -52,6 +61,8 @@ function handleDragEnd() {
|
||||
<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"
|
||||
|
||||
@@ -8,13 +8,22 @@ import YlSwiper from '@/components/YlSwiper/Index.vue';
|
||||
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
|
||||
import emptyImg from '@/assets/img/emptyImg.png';
|
||||
import { isDrag } from '../hooks/useDragEvent';
|
||||
import { defineEmits } from 'vue/dist/vue';
|
||||
|
||||
const survey = defineModel<SurveyItem>('survey');
|
||||
const parentRef = defineModel<any>('parentRef');
|
||||
// 获取问卷分析数据
|
||||
const { questionAnalysis } = useFetchAnalysis(survey.value?.sn as string);
|
||||
const { currentSurvey } = fetchSingleSurvey(survey.value?.sn as string);
|
||||
|
||||
const disableInsight = ref(true);
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['slideChange']);
|
||||
const slideChange = function (swiper) {
|
||||
parentRef.value.resize();
|
||||
emit('slideChange', { swiper, activeIndex: swiper.activeIndex });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -33,6 +42,7 @@ const disableInsight = ref(true);
|
||||
<section class="analysis-info">
|
||||
<!-- 方式一:使用默认插槽,手动添加 swiper-slide 元素 -->
|
||||
<yl-swiper
|
||||
@slideChange="slideChange"
|
||||
:pagination="!isDrag"
|
||||
:slides-per-view="1"
|
||||
:centered-slides="true"
|
||||
|
||||
Reference in New Issue
Block a user