feat(MineTask): 添加问卷列表拖动功能
- 在 Index.vue 中添加拖动开始和结束的事件处理函数 - 在 QuestionList.vue 中根据拖动状态显示/隐藏分页器和导航按钮 - 新增 useDragEvent 钩子用于管理拖动状态
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
11
src/views/Home/components/MineTask/hooks/useDragEvent.ts
Normal file
11
src/views/Home/components/MineTask/hooks/useDragEvent.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { watch,ref } from "vue";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 这个是用于判断是否正在拖动,来决定是否显示左右轮播图的按钮
|
||||||
|
*/
|
||||||
|
const isDrag = ref(false);
|
||||||
|
|
||||||
|
watch(isDrag, (val) => {
|
||||||
|
// console.log('isDrag', val);
|
||||||
|
})
|
||||||
|
export {isDrag}
|
||||||
Reference in New Issue
Block a user