Ionic源码解析之一手动打开list的Slide Item方法

在详细叙述解决问题的方法之前,让我们看下slide item在list中的位置?它和list、item以及item options的关系?


结构

slide item首先存在于一个列表中,所以它的父亲是一个ion-list。

ion-list包含ion-item-sliding。

ion-item-sliding又包含ion-item(用于显示列表内容)和ion-item-options(用于显示滑动处理的选项)

我们这边讲的slide item是指ion-item-sliding。

具体的html的用法可以参考官方文档。

下面通过怎么解决“手动打开Slide Item”的问题来对Ionic2的slide item的源码学习。

怎么手动打开Slide Item

目前左滑可以打开slide item,那么如果通过点击一个button,是否也可以打开slide item呢?

查看了slide item的文档,看到只有slidingItem.close()接口,并没有open接口。

那么看来Ionic2只提供手动关闭slide item的API,没有手动打开slide item的API。


为什么会这样呢?我想只有编写者才知道了。。。

之前没有习惯看框架的源码,其实大部分是框架封装的不错,似乎不需要看源代码,那么就可以拿到想要的;而有的源码看的一头雾水,能力不及所致。


但是当你在网上搜索太多根本无果,那么也只能硬着头皮看看源码吧,看了发现并没有那么难,也许自己也没有那么菜,嘿嘿,夸奖一下自己。

最重要的是不仅可以找到直接的解决方法,也可以从别人的代码中学习编码的方式,受益多多。

下面总结了三种解决的方法:

1. 在源代码中增加一个open的接口

下面是源码中的close接口

close(){

this._setOpenAmount(0,true);

}

增加一个open接口

open(){

this._setOpenAmount(1,true);

}

好处是简单。缺点是直接修改框架源代码肯定不是一个好的解决方法,而且对于这种更新比较快的框架来说,以后的升级和维护中会比较麻烦。

那就看看第二种方法。

2. 直接用css暴力打开

采用css的方式给ion-item以及slide item加入相应的样式去打开。

下面是相应的代码。

其中item就是结构中所说的ion-item, slideItem就是结构中所说的ion-item-sliding。

let coord = pointerCoord(event); //获取点击的起点位置

slideItem.startSliding(coord.x);

let openAmount = this.slideItem._rightOptions.width();

item.setElementStyle("transition", '');

slideItem.setElementClass('active-sliding', true);

slideItem.setElementClass('active-slide', true);

slideItem.setElementClass('active-options-right', true);

item.setElementStyle("transform",

`translate3d(${-openAmount}px,0,0)`);

此方法可以打开,可以实现相应的功能。但是带来的问题是,有一些手机,特别是小米的某些手机,无法正常关闭slide item,是浏览器不兼容的问题,所以如果使用这样的方式,我们需要把超级大麻烦“浏览器兼容”的问题引进来。

其实Ionic2框架很重要的一点是帮你做了相关的浏览器兼容性的处理。

那么我们为什么又要重新做一遍呢?

所以就想到了第三种方法,深入看源码,是否可以模拟手指滑动的过程呢?

模拟手指滑动的过程

通过进一步查看ion-slide-item的源码,发现有一些public的方法:

startSliding

moveSliding

endSliding

这些接口被item-sliding-gesture.js调用,原来slide item还有一个gesture用来管理它。

那么下面就是通过测试的模拟过程:

letcoord=pointerCoord(event),

firstCoordX=coord.x,

firstTimestamp=Date.now(),

step=50,

moveCoordX1=firstCoordX-step,

moveCoordX2=moveCoordX1-step,

endCoordX=moveCoordX2-step,

deltaX=endCoordX-firstCoordX,

deltaT=1;

this.slideItem.startSliding(firstCoordX);

this.slideItem.moveSliding(moveCoordX1);

this.slideItem.moveSliding(moveCoordX2);

deltaT=(Date.now()-firstTimestamp);

this.slideItem.endSliding(deltaX/deltaT);

代码的详细解释主要是确认手指开始、移动、结束的点击位置,当然还有一些其他的参数,这里重点说一下时间这个参数,其他的参数可以参考源码。


为什么需要计算时间?

这里我们采用快速滑动的理论来直接打开slide item。

时间滑动思想

如果是慢一点的滑动时,滑动多大的宽度slide-item-option就出来多大的宽度,如果超过一半停止滑动会直接打开slide item,如果没有超过一半就停止滑动那么slide item会关闭;

这个大家可以通过滑动list来做实验。

因为我们是模拟,所以会根据这个思想会构造相应的参数,否则没办法成功的哦。

这也是为什么moveSliding并不需要隔几秒执行,我们是模拟的快速滑动。

为什么是一个start动作、两次move动作,一次end动作

看了源码就发现必须是一个start动作,至少两次的move动作,一次end动作

起始肯定是需要的,但是move的动作至少是两个,看了源码会知道中间会计算一些值,有些事在第一次move的时候计算的,有些是第二次move的时候计算的,而这些值在end的时候会进行计算。

更多细节部分参见它官方的源码。

源码下载https://github.com/ionic-team/ionic。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,848评论 25 707
  • echo 3 > /sys/class/backlight/acpi_video0/brightness 需要在r...
    柳枝阅读 1,936评论 0 0
  • 俗话说“远亲不如近邻”,对于这句话,我有些不以为然,再远的亲戚毕竟也亲戚,再近的邻居也只是一个陌生人,总是...
    峡溪飞瀑阅读 190评论 0 0
  • 09.27晚 微信群内 邀请了才智创信创始人周翔老师,进行“互联网思维”为主题的分享,现在对之前的分享做一个小结。...
    产品新人学习路阅读 277评论 0 0
  • 【0509晨读感想】 实现梦想人生的魔法 刚好是在上班路上听的今天晨读,听到《聪明女人背小包》这个题目的时候,我瞅...
    小二关阅读 149评论 0 0