作为一个java ，接触ionic混合开发也是无奈之举，项目需要就得来；边做边学，期间踩过很多坑，也在简书中学习到了很多东西，今天就说一下踩过的ionic3关于slides实现轮播的坑吧！
首先实现轮播：（直接上代码）
实现轮播的html：
①
loop：如果为true，则轮播的最后一张时继续循环到第一张图片继续轮播；
zoom：如果为true，则启用图片的放大缩小功能
speed: 值为轮播动画事件单位为ms；
autoplay：值为轮播间隔事件单位为ms；
ionSlideAutoplay：该事件轮播图移动式触发；
点击轮播图事件我这里用的是click事件，也可以使用ionic提供的ionSlideTap事件；
实现轮播的ts：
② 通过ViewChild 获取slides组件
③页面加载启动轮播图，并设置autoplayDisableOnInteraction属性为false：作用是滑动轮播图之后还可以继续轮播，将该属性放到ts中是因为写到slides标签中我在测试的时候有时候失效的；
该事件的作用是
使用ionic的两个钩子来启动和停止轮播事件
以上都实现轮播都是比较都是从网上按照文档一步步实现的，没有什么太大的坑，唯有点击轮播图这个问题困扰了我好久，直到前几天彻底解决掉；
④点击轮播图跳转到详情页：
看到这里应该早就有疑惑了，为什么点击事件的时候没有获取当前图片的id编号，之前我也是这样做的将click事件直接绑定到ion-slide上面传入图片的id编号，但是ion-slides组件有一个bug该组件渲染的轮播图是n+1个，轮播开始图片一次1、2 、3 .... n 、 n+1 、2 、3 ... n+1 ，第n+1张图片==第1张图片，第一张图片只会出现一次，在渲染轮播图的时候第n+1张图上是没有click事件的，也就是说第一张图片除了刚开始可以点击之外，轮播之后无法点击，我试过各种方法总有bug，直到前几天有时间研究了一下官方文档找到了getActiveIndex() 获取当前轮播图下标的方法，遂将click加到ion-slides组件上直接通过计算获取数组中指定元素的id编号；
第一次简书希望大家能够喜欢
网友评论