在详细叙述解决问题的方法之前,让我们看下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。