Ionic3 通讯录索引的实现

最新推荐文章于 2019-04-03 09:08:07 发布

weixin_33830216

最新推荐文章于 2019-04-03 09:08:07 发布

阅读量264

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1432769/blog/1186845

版权

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