How to not to share scroll state between slides?

How can we separate our scroll state between slides? This is real problem for me.

Setting up autoHeight, scroll-y="currentSlideIndex === 1" doesn’t fix but rather create another issue here. I can’t make a page-based form because I need to show the segment for each slide and this was the part of the design requirement. Any clue?

This is a gif… but not moving for some reason until you click it

c4QBxx8ucb493×1012 2.22 MB

Here is my script:

<template>
  <!--
    [CInteractiveScrollview] is just a template for
    IonPage > IonHeader > IonContent > IonFooter.

    It does nothing but only to reduce the repetition when
    declaring header and footer it also has no logic other than
    checking the scroll direction to show/hide the footer.
  -->
  <CInteractiveScrollView
    title="New Education"
    primaryButtonText="Next"
    @clickBackButton="slidePrevOrBack"
    @clickPrimaryButton="slideNextOrSubmit"
  >
    <template #header>
      <CSegment
        v-model="currentSegment"
        scrollable
        :items="['Education Detail', 'Education Field', 'Additional Data']"
      />
    </template>

    <IonSlides
      :options="slidesOptions"
      @ionSlidesDidLoad="onSlidesDidLoad"
      @ionSlideDidChange="onSlidesDidChange"
    >
      <FormDetail class="noscroll" />
      <FormField />
      <FormField class="noscroll" />
      <FormField class="noscroll" />
    </IonSlides>
  </CInteractiveScrollView>
</template>

<script lang="ts">
  // Just some import mess
  ...
  export default defineComponent({
    name: 'EducationCreatePage',
    components: {
      ... // another import mess
    },
    setup() {
      ... // Unrelated stuffs
      const { currentSegment } = useSegmentComposition()

      const slidesOptions = {
        preventInteractionOnTransition: true,
        allowSlidePrev: false,
        allowSlideNext: false,
        autoHeight: true,
      }

      const {
        currentSlide,
        isBeginning,
        isEnd,
        onSlidesDidLoad,
        onSlidesDidChange,
        slideNext,
        slidePrev,
      } = useSlideComposition()

      watch(currentSlide, (newSlide) => (currentSegment.value = newSlide))

      const slideNextOrSubmit = () => {
        isEnd()
          .then((lastSlide) => (lastSlide ? null : slideNext()))
          .catch((err: any) => logger.error(err))
      }

      const slidePrevOrBack = () => {
        isBeginning()
          .then((firstSlide) => (firstSlide ? router.back() : slidePrev()))
          .catch((err: any) => logger.error(err))
      }

      return {
        currentSegment,
        onSlidesDidLoad,
        onSlidesDidChange,
        slidesOptions,
        slideNextOrSubmit,
        slidePrevOrBack,
      }
    },
  })
</script>

<style scoped>
  ::v-deep(ion-grid) {
    max-width: 100% !important;
    text-align: left !important;
  }

  .noscroll {
    max-height: 100vh !important;
    height: calc(100vh - 60px) !important;
    padding: 0 1rem !important;
    overflow: hidden !important;
  }
</style>

1 post - 1 participant

Read full topic