Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析


Posted in Javascript onJanuary 18, 2016

引言

在诺亚财富项目中,使用到了通讯录,如果只是简单的查看,我个人觉得可能过于单调,于是就在查看的基础上,增加了点击滑动的效果。目的有两个:1.体验不错。2.通讯录的数据量较大,我们在点击一个模块的同时,使这个模块滑动至最上层,可视范围也会变大。

效果

点击一个模块,页面即开始向上滑动,直到这个模块至于页面最上层。
这是点击前的地方,我们点击运营中心:

Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析

点击后就会有一个滑动的动画使这个模块滑动到顶部:

Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析实现

获取元素,动态生成id
我们在点击一个元素的同时,我们需要让程序知道我们点击了哪里,是具体到一个div,而不是我们手指点击的地方。
在之前的wiki中有介绍到,接口返回的数据格式是一维数组,在转成多维数组的同时需要对数据进行一次遍历,在这个时候我们就可以对各条数据加上id了:

Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析

在前端页面这样绑定id

<div ng-repeat="x in contacts_list" id="{{x.id}}">

Jquery中的scrolltop

Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析

一般大家都会想到使用jquery的这个方法,

使用方法是:

$(selector).scrollTop(offset)

这样可以实现滑动,但是在使用过程中发现:点击同一个模块,不同的滑动位置点击滑动的距离也不一样,而且滑动到上层的内容就不能再滑动回去的,这与我们的需求严重不符。
并且也研究了一些其他的插件,都不能实现我们想要的效果,那就像如此强大的ionic框架,是否会给我们提供这样一个方法呢?

$ionicScrollDelegate

授权控制滚动视图(通过ion-centent和 ion-scroll指令创建)。
该方法直接被$ionicScrollDelegate服务触发,来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

这里包含了较多的方法,其中resize()方法将在ng-if中经常被使用到,另外

它提供了一个获取屏幕当前滚动高度的方法getPositionScroll():

getScrollPosition()

• 返回: 对象 滚动到该视图的位置,具有一下属性:
o {数值} left 从左侧到用户已滚动的距离(开始为 0)。
o {数值} top 从顶部到用户已滚动的距离 (开始为 0)。

这里我们只需要用到垂直高度,所以使用$ionicScrollDelegate. getPositionScroll().top即可获取当前滚动高度。

ScrollTo与scrollBy

这两个方法就类似于绝对路径(scrollTo)与相对位置(scrollBy)的关系。

我们获取当前点击模块的位置使用如下方法:

document.getElementById(x.id).offsetTop

这里获取的是此div距离顶部的位置,但是我们每次的需求是希望我们点击的模块滑动到屏幕的最上方,而不是整个内容的顶部,所以这里我们使用scrollBy比较好。

这样的话,每次只需要移动屏幕顶部到点击模块的距离即可,方法是:

var scroll = document.getElementById(x.id).offsetTop - $ionicScrollDelegate.getScrollPosition().top;

然后在点击的方法中调用ionic自带的scrollBy方法:

$ionicScrollDelegate.resize();
$ionicScrollDelegate.scrollBy(0,scroll,true);

至此,此功能已经实现,希望对大家有帮助。

本文所述到此结束,Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析已经实现了,希望对大家有所帮助。

Javascript 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 #Javascript
jquery validate表单验证的基本用法入门
Jan 18 #Javascript
jQuery添加删除DOM元素方法详解
Jan 18 #Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 #Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 #Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 #Javascript
实例详解jQuery表单验证插件validate
Jan 18 #Javascript
You might like
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
详解JS构造函数中this和return
2017/09/16 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python中的字典使用分享
2016/07/31 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python tkinter实现连连看游戏
2020/11/16 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
小学生暑假感言
2014/02/06 职场文书
捐款倡议书
2014/04/14 职场文书
趣味运动会标语口号
2015/12/26 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis