博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ionic3 通讯录索引的实现
阅读量:6200 次
发布时间:2019-06-21

本文共 578 字,大约阅读时间需要 1 分钟。

hot3.png

 

关于通讯录这个页面的布局,此处不进行介绍;下面主要是说明Ionic1.0和Ionic3.0的实现间的差异。

一、

 

二、Ionic3.0版本

    在这个版本中,主要是依赖<ion-content>这个标签的属性及方法,实例代码如下:

***.html
Add your content here!
***.tsimport { 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

你可能感兴趣的文章
js常用事件列表
查看>>
20145129 《Java程序设计》第8周学习总结
查看>>
hdu 1890 Robotic Sort splaytree+懒惰标记
查看>>
Android中代码设置RadioButton的高端技巧
查看>>
自动化测试系列:自动化之数据驱动测试
查看>>
English and Programming_Day3
查看>>
如何成为一个牛掰的Java大神?
查看>>
Nginx高性能服务器安装、配置、运维 (4) —— Nginx服务、架构及其信号
查看>>
0-1背包问题
查看>>
node包管理相关
查看>>
assert用法总结
查看>>
插入排序
查看>>
常用正则表达式
查看>>
根据ACR/EULAR 2010 标准定义RA放射学侵蚀病变
查看>>
css:overflow属性妙用
查看>>
网站选修课作业(3.1)
查看>>
从数据库中返回的数据结果中获取指定数据
查看>>
伪静态规则写法RewriteRule-htaccess详细语法使用
查看>>
洗礼灵魂,修炼python(80)--全栈项目实战篇(8)—— 计算器
查看>>
CodeForces336 A & B
查看>>