no-image

Ionic3 通訊錄索引的實現

                                    

 

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

一、Ionic1.0版本

 

二、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:

1、在實現通訊錄這個功能時,可以給item新增sticky,可以實現字母表頭的懸浮效果;

2、另外可以github有一個開源庫