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… Image may be NSFW.
Clik here to view. but not moving for some reason until you click it Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

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