feat(MineTask): 添加问卷列表拖动功能

- 在 Index.vue 中添加拖动开始和结束的事件处理函数
- 在 QuestionList.vue 中根据拖动状态显示/隐藏分页器和导航按钮
- 新增 useDragEvent 钩子用于管理拖动状态
This commit is contained in:
Huangzhe
2025-05-26 11:01:10 +08:00
parent 364b00f51f
commit 76b5235ab5
3 changed files with 25 additions and 4 deletions

View File

@@ -1,13 +1,22 @@
<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 } from 'vue';
import { isDrag } from './hooks/useDragEvent';
const active = ref(0); const active = ref(0);
const total = ref(0); const total = ref(0);
const surveys = defineModel('surveys', { required: true }); const surveys = defineModel('surveys', { required: true });
function setActive(act, tol) { function setActive(act: number, tol: number) {
active.value = act; active.value = act;
total.value = tol; total.value = tol;
} }
function handleDragStart() {
isDrag.value = true;
}
function handleDragEnd() {
isDrag.value = false;
}
</script> </script>
<template> <template>
@@ -24,7 +33,7 @@ function setActive(act, tol) {
<!--分页器如果放置在swiper外面需要自定义样式--> <!--分页器如果放置在swiper外面需要自定义样式-->
</div> </div>
<div> <div>
<van-swipe :loop="false"> <van-swipe :loop="false" @drag-start="handleDragStart" @drag-end="handleDragEnd">
<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" />
</van-swipe-item> </van-swipe-item>

View File

@@ -7,6 +7,7 @@ import { fetchSingleSurvey } from '@/hooks/request/useSurvey';
import YlSwiper from '@/components/YlSwiper/Index.vue'; import YlSwiper from '@/components/YlSwiper/Index.vue';
import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue'; import EmptyContainer from '@/views/Survey/components/EmptyContainer.vue';
import emptyImg from '@/assets/img/emptyImg.png'; import emptyImg from '@/assets/img/emptyImg.png';
import { isDrag } from '../hooks/useDragEvent';
const survey = defineModel<SurveyItem>('survey'); const survey = defineModel<SurveyItem>('survey');
// 获取问卷分析数据 // 获取问卷分析数据
@@ -32,10 +33,10 @@ const disableInsight = ref(true);
<section class="analysis-info"> <section class="analysis-info">
<!-- 方式一使用默认插槽手动添加 swiper-slide 元素 --> <!-- 方式一使用默认插槽手动添加 swiper-slide 元素 -->
<yl-swiper <yl-swiper
:pagination="!isDrag"
:slides-per-view="1" :slides-per-view="1"
:centered-slides="true" :centered-slides="true"
:pagination="true" :navigation="!isDrag"
:navigation="true"
:loop="false" :loop="false"
:space-between="0" :space-between="0"
:allow-touch-move="false" :allow-touch-move="false"

View File

@@ -0,0 +1,11 @@
import { watch,ref } from "vue";
/**
* 这个是用于判断是否正在拖动,来决定是否显示左右轮播图的按钮
*/
const isDrag = ref(false);
watch(isDrag, (val) => {
// console.log('isDrag', val);
})
export {isDrag}