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 相关文章推荐
Javascript模块化编程详解
Dec 01 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
原生js实现自定义滚动条组件
Jan 20 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
php二维数组转成字符串示例
2014/02/17 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
原生JS实现天气预报
2020/06/16 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python简易版图书管理系统
2019/08/12 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书