2019獨角獸企業重金招聘Python工程師標準>>>

?

關于通訊錄這個頁面的布局，此處不進行介紹；下面主要是說明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有一個開源庫

?

?

?

?

轉載于:https://my.oschina.net/u/1432769/blog/1186845

總結

以上是生活随笔為你收集整理的Ionic3 通讯录索引的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。