Ionic3 通讯录索引的实现

前端之家收集整理的这篇文章主要介绍了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有一个开源库

猜你在找的Angularjs相关文章