文档章节

Ionic3 通讯录索引的实现

H
 HillYoung
发布于 2017/07/06 17:41
字数 272
阅读 318
收藏 0

 

关于通讯录这个页面的布局,此处不进行介绍;下面主要是说明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有一个开源库

 

 

 

 

© 著作权归作者所有

H
粉丝 14
博文 100
码字总数 27117
作品 0
南京
程序员
私信 提问
一起疯狂使用 LeanCloud

优秀开发者经验分享【 玩转 LeanCloud 】征文活动,自开始至投稿结束 ,已有近千名开发者关注活动,截止本月10日我们共收到几十位开发者投稿,十分感谢大家对活动的热情支持! LeanCloud 工程...

eapxuo
2017/11/17
0
0
一个App完成入门篇(六)- 完成通讯录页面

第五章和第六章间隔时间有点长,对不起大家了。下面继续。 本节教程将要教会大家如何加载本地通讯录。 导入项目 导入通讯录 自定义js模块 发送和订阅page消息 将要学习的demo效果图如下所示 ...

jonh_felix
2016/04/22
894
0
ionic3怎么使用jquery的daterangepicker组件?

最近用ionic3做移动app,遇到了好多坑,这是其中一个 望大神解救 。在此说明一点:ionic3只支持Typescript语法,不支持javascript语法。我在做的demo例子在这儿:https://www.helloweba.net/j...

clssz
2018/06/08
315
0
Android 的 Intents 和 Intent Filters(实例部分)

引言 上篇我们介绍了Intents和Intent Filters的理论部分,主要是介绍了:activities、services、broadcastreceivers三种组件的Intent机制两种Intent(显式和隐式)及它们如何去匹配目的组件、...

鉴客
2011/09/28
914
0
ionic3之自定义返回菜单的样式-yellowcong

默认在ionic3中,返回的样式是 back,但是我们想自定义一下,所以就 需要开到了,可以 通过修改的方式来搞定这件事。 修改方法 其实只是配置了里面的backButtonText和backButtonIcon 两个属性...

yelllowcong
2018/03/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部