ieplus-app/src/pagesStudy/pages/exam-start/components/question-wrap.vue

<template>
  <scroll-view v-if="visible" scroll-y class="question-wrap" :scroll-into-view="scrollIntoView"
    :scroll-with-animation="true">
    <view class="h-20"></view>
    <question-item :question="question" :readonly="readonly" :index="index" :subQuestionIndex="subQuestionIndex"
      @update:question="emit('update:question', $event)" @scrollTo="handleScrollTo"
      @changeSubQuestion="handleChangeSubQuestion" />
    <view class="h-20"></view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { Study } from '@/types';
import QuestionItem from './question-item.vue';
const props = defineProps<{
  question: Study.Question;
  readonly?: boolean;
  currentIndex: number;
  index: number;
  subQuestionIndex: number;
}>();
const visible = computed(() => {
  return Math.abs(props.currentIndex - props.index) <= 2;
});
const emit = defineEmits<{
  (e: 'update:question', question: Study.Question): void;
  (e: 'changeSubQuestion', index: number): void;
}>();
const handleChangeSubQuestion = (index: number) => {
  emit('changeSubQuestion', index);
}
const scrollIntoView = ref('');
const handleScrollTo = (selector: string) => {
  console.log('收到子组件滚动请求', selector)
  scrollIntoView.value = '';
  setTimeout(() => {
    if (selector) {
      scrollIntoView.value = selector;
    }
  }, 200);
}

</script>

<style lang="scss" scoped>
.question-wrap {
  @apply h-full box-border;
}
</style>