近日,因为公司官网开发需要,用了angularjs框架,此外,因为很多图片需要轮播,由于自己写的轮播图在angular指令中的索引值从绑定箭头和圆点点击事件切换过程没有全局变化,无奈之下,用了比较流行的swiper插件,总体上来说,这个插件还是很强悍的。
在使用swiper插件时发现,swiper基本使用有以下两个缺点:
1.初始化时如果没有设置"loop:true",swiper的箭头点击事件会受到限制,当索引值等于0时,左边箭头无法触发滑动,当索引值等于滑动图片总数减一时右边箭头也无法触发滑动事件;
2.初始化时如果设置"loop:true",虽然可以弥补以上1的缺点,但是它会乱复制图片;
以上两点是我在使用swiper过程中遇到的难点之二。
由于angularjs ng-repeat指令添加节点需要一定的时间,因此在angularjs指令中使用swiper需要使用angular定时器$timeout(function(){},0);
此外,为了解决angularjs过滤器过滤数据时swiper轮播图的索引值不会置于0,我自己想个思路:1.初始化swiper 2.将swiper的transform属性重新设置