이온 가상 스크롤이 있는 알파벳 색인

이 게시물은 섹션을 나누기 위한 헤더가 있는 연락처 목록의 첫 번째 게시물의 확장입니다. 당신은 그것을 읽을 수 있습니다 here !

이 예제를 확장하여 목록 측면에 알파벳순 인덱스를 추가하는 방법을 보여주고 싶었습니다. 이것은 한동안 저를 괴롭혔던 것이었습니다. 그런 다음 재빨리 그것에 대한 나의 관심을 다시 불러 일으켰습니다. 업무에 필요했고 현재 가지고 있던 솔루션이 마음에 들지 않았기 때문에 이 문제를 해결하고 싶었습니다. 내가 항상 언급한 예는 Ross Martinionic2-alpha-scroll입니다. 그러나 최신 버전의 Ionic에서는 이를 약간 수정해야 했습니다. 같은 트위터 대화가 나에게 힌트를 주었고 나는 그것을 가지고 굴렀습니다.

내 동료 Stephen과 나는 그 작업 프로젝트를 위해 고정된 ion-list를 생각해 냈지만 누군가에게 도움이 될 것이라고 확신하기 때문에 모두에게 가져오고 싶었습니다! 나는 이와 같은 예를 여러 번 찾았습니다. 나는 이것이 누군가를 도울 수 있다고 확신합니다. 따라서 이 예에서는 코드에서 ion-list 뒤에 ion-virtual-scroll를 추가하는 것으로 시작했습니다. 그런 다음 Stephen은 다음과 같이 스타일을 추가했습니다.

//home.page.html
<ion-header>
  <ion-toolbar>
    <ion-title> Contacts </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-virtual-scroll #vScroll [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-list #alphaList class="ion-alpha-sidebar">
    <ion-item      *ngFor="let letter of alphabet"
      (click)="goLetter(letter)"
      lines="none"
    >
      {{letter}}
    </ion-item>
  </ion-list>
</ion-content>

// home.page.scss
.ion-alpha-sidebar {
  position: fixed;
  right: 0px;
  top: 50px;
  bottom: 0px;
  display: flex;
  flex-flow: column;
  z-index: 50000;
  margin: 0px;
  ion-item {
    font-size: 16px;
    color: #ffffff;
    flex: 1 1 auto;
    display: flex;
    list-style: none;
    width: 60px;
    font-weight: 500;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

@media screen and (max-width: 1024px) {
  .ion-alpha-sidebar {
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    padding: 0px;
    ion-item {
      width: auto;
      font-size: 14px;
      color: var(--ion-color-primary);
    }
  }
}

위의 HTML에서 알파벳 문자를 포함하는 배열을 반복하여 알파벳 인덱스를 생성하는 것을 볼 수 있습니다. 배열은 해당 문자를 나타내는 적절한 문자 코드를 반복하는 for loop에 의해 생성됩니다. 해당 문자ion-virtual-scroll 목록의 위치로 이동하기 위해 각 문자에 첨부된 클릭 이벤트가 있습니다. 알파벳을 생성하는 코드와 문자별로 해당 섹션으로 이동하는 코드는 다음과 같습니다.

//home.page.ts
...
export class HomePage implements OnInit, AfterViewInit {
    @ViewChild(IonContent) content: IonContent;
  @ViewChild("vScroll") public virtualScroll: IonVirtualScroll;

  public contacts: Array<Contact> = new Array<Contact>();
  public alphabet: String[] = [];
  ...

  constructor(private contactsService: ContactsService) {
    this.alphabet.push(String.fromCharCode(35));
    for (let i = 0; i < 26; i++) {
      this.alphabet.push(String.fromCharCode(65 + i));
    }
  }
  ...
  goLetter(letter: string) {
    const firstContact = this.contacts.find((c) => {
      return c.name.last.toUpperCase().charAt(0) === letter.toUpperCase();
    });
    const wantedIndex = this.virtualScroll.items.findIndex(
      (item) => item === firstContact    );
    this.virtualScroll.positionForItem(wantedIndex).then((offset: number) => {
      this.content.scrollToPoint(0, offset);
    });
  }
  ...
}

따라서 이전 코드는 먼저 숫자로 시작하는 연락처 정렬을 위해 알파벳에 #를 추가합니다. 그런 다음 A부터 시작하여 각 문자를 추가합니다(문자 코드65로 표시). 그런 다음 목록 내부로 점프하는 기능이 있습니다. 정렬된 연락처 배열에서 문자가 성의 첫 글자와 일치하는 첫 번째 연락처를 찾습니다(내 경우). 그런 다음 가상 목록 내에서 해당 연락처의 인덱스를 찾습니다. ion-virtual-scroll를 해당 특정 색인으로 스크롤합니다.

사이드 인덱스에 필요한 거의 모든 것입니다!

그룹 제목 재검토

상단에 링크된 이전 게시물에서 섹션 헤더를 만드는 방법에 대해 이야기했습니다. 그러나 그 이후로 코드를 좀 더 효과적으로 업데이트했습니다.

//home.page.ts
...
myHeaderFn = (record, recordIndex, records) => {
  let result = null;
  if (recordIndex !== 0) {
    const prevRec = records[recordIndex - 1];
    const currRec = record;
    const prevName = prevRec.name.last;
    const currName = currRec.name.last;
    if (prevName !== null && currName !== null) {
      let prevCharCode = prevName.toUpperCase().charCodeAt(0);
      let currCharCode = currName.toUpperCase().charCodeAt(0);
      if (prevCharCode !== currCharCode) {
        let prevChar = prevName.toUpperCase().charAt(0);
        let currChar = currName.toUpperCase().charAt(0);
        let prevIsLetter = this.isLetter(prevChar);
        if (!prevIsLetter) {
          let currIsLetter = this.isLetter(currChar);
          result = currIsLetter ? currName.toUpperCase().charAt(0) : null;
        } else {
          result = currName.toUpperCase().charAt(0);
        }
      }
    }
  } else {
    const name = record.name.last;
    if (name !== null) {
      let nameChar = name.toUpperCase().charAt(0);
      let headerChar = this.isLetter(nameChar) ? nameChar : "#";
      result = headerChar.toUpperCase();
    }
  }
  return result;
};

public isLetter(char: any): boolean {
  return /[a-zA-Z]/.test(char);
}
...

이제 헤더 기능 내에서 유사한 문자 코드 접근 방식을 사용하여 알파벳을 만들었습니다. charCodeAt 를 사용하여 숫자 값을 사용하여 두 레코드를 비교할 수 있습니다. 알파벳순으로 정렬된 목록에서 첫 번째 인덱스를 보고 있는 경우 헤더를 숫자인 경우 # 로 설정하고 문자인 경우 첫 번째 문자를 설정합니다. 그런 다음 나머지 목록에 대해 숫자 값을 비교합니다. 동일하지 않고 이전 레코드가 숫자인 경우 현재 레코드의 첫 글자를 확인합니다. 숫자인 경우 반환값을 null로 둡니다. 편지라면 그 편지를 돌려드립니다. 원래 문자 코드가 같지 않고 이전 레코드가 문자로 시작하는 경우 현재 레코드의 첫 번째 문자를 반환합니다. 다소 복잡해 보이지만 한두 번 읽어보면 그리 나쁘지는 않습니다.

어쩌면 당신은 더 매끄러운 솔루션이 있습니다!? 하시면 보고싶습니다!

소스 코드의 사본을 얻으려면 here으로 이동하십시오.