[Ionic 5] Segment & Slider 연동하기

# 개요

- 하.. 좌우로 swipe하면서, 상단 Tab까지 이동될 수 있는 방법을 열심히 찾았으나, 못구할 뻔 했으나, 꾸역꾸역 해결책을 구했다.

- 다만, scrollIntoView라는 오래된 HTMLElement의 function이 사용되는데, 이 함수가 IOS의 WKWebView?의 11.2 버전 이하에서는 제대로 작동 및 지원이 안되었다고 한다. 그리고, scroll이 smooth하지 않고, 끊길 수 있는데, 이것을 해결하는 방식은 scroll-polyfill 패키지나 smooth-scroll 패키지 둘중하나를 설치해서, 해결할 수 있을 것으로 보인다.

Q. polyfill이란? 

브라우저가 지원하지 않는 기능을 구현하여, 사용할 수 있도록 하는 것이다. 다만, 플러그인 로드 속도 때문에 성능 이슈가 있을 수 있다. 일단, 안드로이드, 애플 기기에 문제가 딱히 없다면, 그냥 사용하자.

# 템플릿파일 구성

<ion-header  >

  <!-- Scrollable Segment -->

  <ion-toolbar class="less-height" color="primary">

     <ion-segment scrollable mode="md" (ionChange)="segmentChanged(segment)" [(ngModel)]="segment" id="seg" >

         <ion-segment-button mode="md" id="seg-1" value="0">

           <p>Description</p>

         </ion-segment-button>

         <ion-segment-button mode="md" id="seg-2" value="1">

           <p>Interconnections</p>

         </ion-segment-button>

         <ion-segment-button mode="md" id="seg-3" value="2">

           <p>Declensions</p>

         </ion-segment-button>

         <ion-segment-button mode="md" id="seg-4" value="3">

           <p>Phraseologisms</p>

         </ion-segment-button>

         <ion-segment-button mode="md" id="seg-5" value="4">

           <p>Etymology</p>

         </ion-segment-button>

         <ion-segment-button mode="md" id="seg-6" value="5">

           <p>Analysis</p>

         </ion-segment-button>

       </ion-segment>

 </ion-toolbar>

 </ion-header>

 

 <ion-content>

     <ion-slides (ionSlideDidChange)="slideChanged()" class="word-slides">

         <ion-slide>

           <p>Slide 1</p>

         </ion-slide>

         <ion-slide>

           <p>Slide 2</p>

         </ion-slide>

         <ion-slide>

           <p>Slide 3</p>

         </ion-slide>

         <ion-slide>

           <p>Slide 4</p>

         </ion-slide>

         <ion-slide>

           <p>Slide 5</p>

         </ion-slide>

         <ion-slide>

           <p>Slide 6</p>

         </ion-slide>

       </ion-slides>

 </ion-content>

# 컴포넌트 파일

import { Component, ViewChild, AfterViewInit} from '@angular/core';

import { NavController, IonSlides, IonSegment } from '@ionic/angular';

@Component({

  selector: 'app-date-picker',

  templateUrl: './date-picker.page.html',

  styleUrls: ['./date-picker.page.scss'],

})

export class DatePickerPage implements AfterViewInit {

  @ViewChild(IonSlides) slider: IonSlides;

  segment = 4;

  constructor() {}

  ngAfterViewInit(){

    this.segmentChanged(null);

  }

  async segmentChanged(event) {

    await this.slider.slideTo(this.segment);

    this.slider.update();

  }

  async slideChanged() {

    this.segment = await this.slider.getActiveIndex();

    this.focusSegment(this.segment+1);

  }

  focusSegment(segmentId) {

    document.getElementById('seg-'+segmentId).scrollIntoView({ 

      behavior: 'smooth',

      block: 'center',

      inline: 'center'

    });

  }

}

# Scroll Bar는 없애기(.scss 파일) : 사파리는 미지원

// Chrome, Safari, Opera

#seg::-webkit-scrollbar {

    display: none;

}

  

// IE, Edge

#seg {

    -ms-overflow-style: none;

}

#출처

https://stackoverflow.com/questions/57122698/ionic-4-how-to-focus-the-view-of-ion-segment-when-its-clicked