목록 제목이 있는 Ionic 가상 스크롤

우리는 긴 연락처나 특정 유형의 사용자를 표시해야 하는 응용 프로그램이 있습니다.그것은 친구, 동료, 전화 연락처 또는 대량의 다른 용례 목록이 될 수 있다.그럼에도 불구하고 ion-virtual-scroll 이 목록들은 내장된 성능 장점이 있기 때문에 쉽게 만들 수 있다.에오니아가 그들의 문서에서 말한 바와 같이 "리스트의 모든 기록이 한 번에 나타나는 것은 아니다. 반대로 일부 기록은 (뷰포트를 채울 수 있을 정도로) 나타나고 사용자가 스크롤하는 데 다시 사용된다."이것은 대량의 데이터를 포함할 수 있는 매우 긴 목록에 매끄러운 스크롤 체험을 제공하는 데 도움이 된다.
새 빈 항목을 만들 때부터 디렉터리로 이동하여 서비스를 제공할 것입니다. 그러면 코드를 작성할 때 변경 사항을 볼 수 있습니다.

$ ionic start ionic-vs-example blank --type=ionic-angular
$ cd ionic-vs-example
$ ionic serve

새로 만든 항목을 열 때 기본 공백 항목 설정을 사용합니다.그리고 우리는 이 예에서 가짜 연락처 데이터를 추출하기 위해 논리를 처리하는 서비스를 만들 수 있다.

$ ionic g service contacts

새 contacts.service.ts 파일을 열면 API에서 연락처를 요청하는 함수를 추가할 수 있습니다.우리의 페이지는 초기화할 때 이 API를 핑하고 가상 목록을 채울 것입니다.이 예에서, 나는 randomuser.me 연락처 데이터에 대한 잠재적인 요청을 시뮬레이션할 것이다.이 웹 요청을 보내기 위해서는 우선 HttpClientModule 중의 app.module.ts 을 가져오고 HttpClient 를 contacts 서비스 자체로 가져와야 합니다.그리고 HttpClient ping을 사용하여 결과를 얻을 수 있습니다.다음과 같이 해야 합니다.

// app.module.ts
...
import { HttpClientModule } from "@angular/common/http";

@NgModule({
...
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
  ],
...
})
export class AppModule {}

// contacts.service.ts
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root",
})
export class ContactsService {
  constructor(private http: HttpClient) {}

  getContacts() {
    return this.http.get<any>("https://randomuser.me/api", {
      params: {
        results: "300",
      },
    });
  }
}

연락처 속성을 올바르게 사용하려면 API 결과에 대한 인터페이스를 만들고 각 객체에 컨텍스트를 제공할 수 있습니다.이렇게 할 때, 그것은 보기에 이렇다.

// contact.ts
export interface Contact {
  name: ContactName;
  email: string;
}

export interface ContactName {
  title: string;
  first: string;
  last: string;
}

현재, home.page.ts 파일에서, 우리는 핑contacts.service.ts을 통해 연락처 목록을 얻을 수 있으며, 결과를 전역 연락처 변수에 분배할 수 있다.이 변수는 가상 목록을 만드는 데 사용되는 연락처 그룹을 저장합니다.

import { Component, OnInit } from "@angular/core";
import { Contact } from "../contact";
import { ContactsService } from "../contacts.service";

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"],
})
export class HomePage implements OnInit {
  contacts: Array<Contact> = new Array<Contact>();

  constructor(private contactsService: ContactsService) {}

  ngOnInit() {
    this.contactsService.getContacts().subscribe((res) => {
      this.contacts = res["results"];
      console.log(this.contacts);
    });
  }
}

저희가 연락처를 가지고 있기 때문에, 드디어 home.page.html 파일을 설정하여 가상 목록을 표시할 수 있습니다.ion-virtual-scroll 이 연락처를 수락하고 모든 연락처를 위한 가상 프로젝트를 만들 수 있습니다.우리는 html에서 연락처를 순환적으로 표시하고 연락처의 전체 이름과 전자 우편 주소를 표시할 것이다.

//home.page.html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Contacts </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-virtual-scroll [items]="contacts">
    <ion-item *virtualItem="let item">
      <ion-label>
        <h2>{{item.name.first}} {{item.name.last}}</h2>
        <h4>{{item.email}}</h4>
      </ion-label>
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

생성된 가상 목록은 DOM에서 볼 수 있는 내용만 로드하여 원활하게 스크롤됩니다.
Ionic Virtual Scroll - Watch Video

목록 제목

일단 우리가 매끄러운 스크롤 목록이 생기면, 우리는 보통 알파벳 순서에 따라 연락처를 그룹으로 나눈다.이런 상황에서 나는 성씨에 따라 연락처를 정렬하고 싶다.우선, 우리는 정렬 순서를 수정하고, 연락처를 성씨별로 정렬해야 한다.그러면 다음과 같은 결과가 발생합니다.

다음 단계는 헤더를 사용하여 연락처를 분해할 것입니다.제목은 연락처 성의 이니셜에 따라 연락처를 구분하는 데 사용됩니다.이것은 당신이 찾고 있는 연락처를 식별하기 위한 명확한 그룹을 만들 것입니다.Ionic의 ion virtual scroll을 사용하면 목록에 제목 기능을 삽입할 수 있습니다.이 제목 기능을 통해 연락처를 방문하여 제목 위치를 확인할 수 있습니다.헤더 함수를 만들고 연락처의 성씨의 자모가 다음 시간과 일치하지 않는 시간을 찾을 것입니다.이것이 바로 우리가 제목을 놓은 곳이다.코드는 다음과 같습니다.

// home.page.html
...

<ion-content [fullscreen]="true">
  <ion-virtual-scroll [items]="contacts" [headerFn]="myHeaderFn">
    <ion-item-divider *virtualHeader="let header">
      {{ header }}
    </ion-item-divider>
    <ion-item *virtualItem="let item">
      <ion-label>
        <h2>{{item.name.first}} {{item.name.last}}</h2>
        <h4>{{item.email}}</h4>
      </ion-label>
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

// home.page.ts
...
export class HomePage implements OnInit {
  ...

  myHeaderFn = (record, recordIndex, records) => {
    let result = null;
    if (recordIndex !== 0) {
      const c1 = record;
      const c2 = records[recordIndex - 1];
      if (c1.name.last != null && c2.name.last != null) {
        if (
          c1.name.last.charAt(0).toUpperCase() !==
          c2.name.last.charAt(0).toUpperCase()
        ) {
          result = c1.name.last.charAt(0).toUpperCase();
        }
      }
    } else {
      const name = record.name.last;
      if (name != null) {
        result = name.charAt(0).toUpperCase();
      }
    }
    return result;
  };
}

myHeaderFn 목록에 없는 한 현재 기록과 이전 기록을 보십시오.첫 번째 색인에서 우리는 성씨의 첫 번째 문자만 되돌려줍니다.나머지 색인에 대해 현재 성의 첫 번째 자모가 이전과 같은지 확인합니다.만약 그렇다면, 우리는 계속 전진해서, null, 만약 그렇지 않다면, 우리는 그 새 편지로 돌아간다.결과는 다음과 같습니다.
Ionic Virtual Scroll w/ Headers - Watch Video

결론

그렇습니다!당신은 현재 가상 목록이 하나 있는데, 매끄럽게 스크롤할 수 있으며, 연락처의 성씨에 따라 몇 부분으로 나눌 수 있다.분명히 당신의 요구를 충족시키기 위해 이 기능을 더욱 확장할 수 있는 무수한 방법이 있습니다.한 가지 방법은 클릭할 수 있는 색인을 만들어서 이 부분 사이를 뛰어넘는 것이다.아마도 이것은 다른 강좌에 있을 것이다🙂
이 프레젠테이션의 전체 코드를 찾으려면 here 을 클릭합니다.