How to not to share scroll state between slides?

Ionic Framework Ionic Vue
1

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… :point_down: but not moving for some reason until you click it :smile_cat:

c4QBxx8ucb
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>
2

I’ve been hesitant to comment on your threads because I know nothing about Vue, but I can’t shake the feeling that you’re asking slides to do something they really aren’t intended for, and maybe your life will get a lot easier if you find some other way to implement your UI.

1 Like
3

your forward/back events are not on the slides component, so your slideNext/back are operating on your CInteractiveScrollView component

I have a similar design, header, content and footer with next/prev…
I had to forward the event up to the slides component

4

Hi @rapropos! Thanks for answering… I’ll try to use different approach on this.

5

Hi @stedweil , the problem is not about the event, it works perfectly fine. The problem is I’m not be able to separate the scroll between slides.

6

I don’t see that problem in my app. but I send the event to the slides component

I have a separate ioncontent per slide

7

That “separate ioncontent” part confuse me a little bit… If you have ioncontent per slide, doesn’t it means you creating a nested ioncontent on a view?

The docs said…

There should only be one content in a single view.

Would you share your code please?

Anyways, here is how my CInteractiveScrollview looks like:

<IonPage>
    <IonHeader>...</IonHeader>
    <IonContent :fullscreen="fullscreen" :scroll-x="scrollX" :scroll-y="scrollY">
        <IonHeader translucent collapse="condense">
            ...
            <slot name="header" />
        </IonHeader>

        <slot />
    </IonContent>
    <IonFooter>..</IonFooter>
</IonPage>
8

here are instructions for my repo

the Content component contains the IonContent element. and will scroll on a device small enough.

I am not near a system where I can add more data elements, but u could make the default structures bigger in the Slides component to do it

9

Thank you very much, I’ll check it soon after this.