【Ionic×Composition API에서 ion-Slides를 호출하는 방법

29999 단어 Vue.jsComposition APIVue 3Ionictech
Ionic × 는 Vue3(Composition API)에서 호칭ion-slides 방법을 설명하는 방법입니다.
결론만 알고 싶은 사람을 위해서는 먼저 코드 전체를 위에 놓아라.
아래 코드만 잘 모르시는 분들은 계속 읽어주세요.

결론


<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <button @click="nextSlide()">次のページ</button>
      <button @click="prevSlide()">前のページ</button>
      <button @click="slideTo(2)">3ページ目</button>
      
      <ion-slides :options="slideOpts" ref="slideRef">
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { ref } from 'vue';
import { IonPage, IonContent, IonSlides, IonSlide } from '@ionic/vue';

export default {
  components: {
    IonContent,
    IonPage,
    IonSlides,
    IonSlide,
  },
  setup() {
    const slideRef = ref<any>(null);

    const nextSlide = async () => {
      const s = await slideRef.value.$el.getSwiper();
      await s.slideNext();
    };

    const prevSlide = async () => {
      const s = await slideRef.value.$el.getSwiper();
      await s.slidePrev();
    };

    const slideTo = async (index: number) => {
      const s = await slideRef.value.$el.getSwiper();
      await s.slideTo(index);
    };
    
    return {
      slideRef,
      nextSlide,
      prevSlide,
      slideTo,
    };
  },
};
</script>

해설


1. ion-slides의ref 설정


ion slides 참조를 위해 ref 제작.
<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <ion-slides :options="slideOpts" ref="slideRef">
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { ref } from 'vue';
import { IonPage, IonContent, IonSlides, IonSlide } from '@ionic/vue';

export default {
  components: {
    IonContent,
    IonPage,
    IonSlides,
    IonSlide,
  },
  setup() {
    const slideRef = ref<any>(null);
    return {
      slideRef,
    };
  },
};
</script>

2. 페이지 보내기 버튼과 함수 설치


여기.에서 정의한 방법을 사용하려면 다음과 같은 절차getSwiper()에서 swiper 실례를 얻어야 한다.
const s = await slideRef.value.$el.getSwiper();
상술한 실례에 대해 각 방법을 집행한다.
<template>
  <ion-page>
    <ion-content :fullscreen="true">
+     <button @click="nextSlide()">次のページ</button>
+     <button @click="prevSlide()">前のページ</button>
+     <button @click="slideTo(2)">3ページ目</button>

      <ion-slides :options="slideOpts" ref="slideRef">
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { ref } from 'vue';
import { IonPage, IonContent, IonSlides, IonSlide } from '@ionic/vue';

export default {
  components: {
    IonContent,
    IonPage,
    IonSlides,
    IonSlide,
  },
  setup() {
    const slideRef = ref<any>(null);
    
+   const nextSlide = async () => {
+     const s = await slideRef.value.$el.getSwiper();
+     await s.slideNext();
+   };
+
+   const prevSlide = async () => {
+     const s = await slideRef.value.$el.getSwiper();
+     await s.slidePrev();
+   };
+
+   const slideTo = async (index: number) => {
+     const s = await slideRef.value.$el.getSwiper();
+     await s.slideTo(index);
+   };
    
    return {
      slideRef,
    };
  },
};
</script>
이렇게 하면ion slides 방법을 사용할 수 있습니다.
ValueError: Error when checking : expected input_1 to have 4 dimensions, but got array with shape (X
uva10130

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage