cordova에서 스마트 폰 앱 개발 4

Ionic에서 기능 만들기

ionic만의 기능을 몇 가지 픽업해 작성해 본다

h tps // 이오니 cf 라메를 rk. 이 m / jp / cs / api / s에서 s
h tps // 이오니 cf 라메를 rk. 코 m / jp / 두 cs / 아피 / 레오 r
h tps // 이오니 cf 라메를 rk. 코 m / jp / 드 cs / 아피 / 인후에서 - sc rotl

슬라이드

마지막으로 만든 tab4에 슬라이더를 포함해보십시오.

\src\app\tab4\tab4.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab4',
  template: `
    <ion-slides pager="true" [options]="slideOpts" style="width:100%;height:100%">
      <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>
  `,
  styleUrls: ['./tab4.page.scss'],
})
export class Tab4Page {
  slideOpts = {
    initialSlide: 0,
    speed: 400
  };
  constructor() {}
}

style="width:100%;height:100%"를 지정하지 않으면 이상하게 좁거나, 2 페이지째가 보이고 버리거나 하므로 주의

initialSlide: 0 으로 초기 페이지를 지정할 수 있다



reorder

새로 tab5를 만들고 재정렬을 통합해 봅니다.

※tab5를 작성하는 순서는 생략

\src\app\tab5\tab5.page.ts

import { Component } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';

@Component({
  selector: 'app-tab5',
  template: `
<ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>
      Item 1
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>
      Item 2
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>
      Item 3
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>
      Item 4
    </ion-label>
  </ion-item>
  <!-- Custom reorder icon end items -->
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>
      Item 5
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-reorder slot="start"></ion-reorder>
    <ion-label>
      Item 6
    </ion-label>
  </ion-item>
</ion-reorder-group>
  `,
  styleUrls: ['./tab5.page.scss'],
})
export class Tab5Page {

  constructor() { }

  doReorder(event) {
    event.detail.complete();
  }

}

event.detail.complete(); 이벤트를 이용할 때의 약속



infinite-scroll

※infinite-scroll 는 tab 내에서 이용하면 읽기 이벤트가 발생하지 않았기 때문에, 별도 페이지로서 작성

우선 페이지 작성

C:\cordova_app\helloIonic>ionic g
? What would you like to generate? page
? Name/path of page: scroll
> ng.cmd generate page scroll
CREATE src/app/scroll/scroll.module.ts (543 bytes)
CREATE src/app/scroll/scroll.page.html (125 bytes)
CREATE src/app/scroll/scroll.page.spec.ts (691 bytes)
CREATE src/app/scroll/scroll.page.ts (256 bytes)
CREATE src/app/scroll/scroll.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (459 bytes)
[OK] Generated page!

작성한 페이지에 infinite-scroll 을 포함해 간다

\src\app\scroll\scroll.page.ts

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

@Component({
  selector: 'app-scroll',
  templateUrl: 'scroll.page.html',
  styleUrls: ['scroll.page.scss'],
})

export class ScrollPage {

  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  dataList:any;

  constructor() {
    this.dataList = [];
    console.log('init');
    for (let i = 0; i < 25; i++) { 
      this.dataList.push("Item number "+this.dataList.length);
    }
  }

  loadData(event) {
    console.log('event');
    setTimeout(() => {
      console.log('Done');
      for (let i = 0; i < 25; i++) { 
        this.dataList.push("Item number "+this.dataList.length);
      }
      event.target.complete();
      if (this.dataList.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

}

constructor 에서는 초기 표시분 25행을 dataList 로서 정의

loadData 는 말미까지 스크롤 했을 경우의 재읽기 이벤트

초기 표시와 마찬가지로 dataLlist에 25 행을 추가합니다.

1000행에 도달하면 스크롤 이벤트를 비활성화합니다.

\src\app\scroll\scroll.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>scroll</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content overflow-scroll='false'>
  <ion-list>
    <ion-item *ngFor="let item of dataList">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>
  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

ion-list 가 리스트 표시부, ion-infinite-scroll 가 이벤트 정의

*ngFor="let item of dataList"로 dataList 를 item 으로 정의해, 존재하는 분 루프 시킨다

{{item}}에서 데이터 바인딩됩니다. 요소가 있으면 {{item.value}}로 참조 할 수 있습니다.

끝까지 가면 로드 이벤트가 발생하고 행이 추가됩니다.



cordova에서 스마트 폰 앱 개발 5