Ionic3 通信錄索引的實現

 

關於通信錄這個頁面的佈局，此處不進行介紹；下面主要是說明Ionic1.0和Ionic3.0的實現間的差別。

1、Ionic1.0版本

 

2、Ionic3.0版本

    在這個版本中，主要是依賴<ion-content>這個標籤的屬性及方法，實例代碼以下：

***.html
<ion-content>
  Add your content here!
</ion-content>


***.ts
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

 

在實現經過字母來定位對應的分組時，主要是使用到了scrollTo(x, y, duration)的方法，具體偏移量是多少，根據實際要求進行計算得出；

 

PS：

一、在實現通信錄這個功能時，能夠給item添加sticky，能夠實現字母表頭的懸浮效果；

二、另外能夠github有一個開源庫