首先吐槽下ioinc3中的这个ion-slides这个组件真是一步一坑,时刻走在填坑的路上...
这不目前所做的移动端项目在首页上部有个轮播图,loop='true'自动循环播放.既然是轮播图一般情况下每个图片绑定的都有点击事件来跳转的相应页面. 但是swipe组件实现无限循环的原理是loop='true'时,再轮播的首尾分别复制两个slide DOM元素,但也仅仅复制了DOM元素,元素中绑定的一干事件都没复制,这就导致了我们滑动到这两页面时无论如何点击都毫无反应.
下面是我的解决办法,因为项目中已经有人引入了jq,正好我可以直接拿来用.
首先给最外层的ion-slides绑定ionSlideTap事件,这个事件是可以响应的,让后去掉之前绑定的click事件,因为用不到了.然后给里面的slide动态绑定class该class名与ngFor循环的下标有关.
效果如下:
模板代码如下:
js代码如下:
然后后使用ion-slides的(ionSlideTap)触发事件获取真实下标,并用该下标读取你遍历的对应的每一项,然后用js获取当前真实下标对应的slide类名并绑定click事件dosomething...
代码如下:
注:该方法实现原理是通过ngClass给每个遍历项动态设置和下标有关的className,并通过(ionSlideTap)事件获取遍历项的真实下标,再通过该下标在你遍历的数组里读取当前点击项的内容最后用js获取该遍历项对应的动态类名绑定事件...
注意:js绑定事件是要用one()方法,或$('.class').off('click').on()先解除再绑定,以避免绑定累加现象.
详见:click事件的累加绑定，绑定一次点击事件，执行多次 - sadleaflzh的专栏 - CSDN博客
以上仅限正常的轮播情况,不幸的是我们项目里该轮播图下面还有个特殊的轮播....
so...继续填坑(泪奔中)...
这个特殊的轮播是在2个slide里面用row,col布局写了2页每页2行4列8个菜单项.既然是菜单当然都有绑定事件.无一例外复制的DOM全都无效.因为时间问题,还有这种情况不太常见,所以这里就先不写了,如有需要或是觉得上面方法有问题朋友欢迎在下面留言.
