2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

?

關(guān)于通訊錄這個(gè)頁(yè)面的布局，此處不進(jìn)行介紹；下面主要是說明Ionic1.0和Ionic3.0的實(shí)現(xiàn)間的差異。

一、Ionic1.0版本

?

二、Ionic3.0版本

? ? 在這個(gè)版本中，主要是依賴<ion-content>這個(gè)標(biāo)簽的屬性及方法，實(shí)例代碼如下：

***.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();} }

?

在實(shí)現(xiàn)通過字母來定位對(duì)應(yīng)的分組時(shí)，主要是使用到了scrollTo(x,?y,?duration)的方法，具體偏移量是多少，根據(jù)實(shí)際要求進(jìn)行計(jì)算得出；

?

PS：

1、在實(shí)現(xiàn)通訊錄這個(gè)功能時(shí)，可以給item添加sticky，可以實(shí)現(xiàn)字母表頭的懸浮效果；

2、另外可以github有一個(gè)開源庫(kù)

?

?

?

?

轉(zhuǎn)載于:https://my.oschina.net/u/1432769/blog/1186845

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。