第一篇简书,踩过的关于ion-slides制作轮播图的坑

    作为一个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编号;


第一次简书希望大家能够喜欢

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,227评论 25 708
  • 当下,老师们都在享受着自己的暑假,这也引来诸多上班族的羡慕妒忌恨:你们做老师的真是太幸福了,拥有寒假暑...
    鹤望兰_889a阅读 649评论 1 4
  • 终于回家了,因为科二周末练车,已然有两个月没回家了,上周末给奶奶打电话,答应奶奶这周末一定回家,还好科二考试...
    简约Dr阅读 403评论 0 1
  • 不知道从什么时候开始,我们在做一件事情的时候会考虑很多了, 很怀念年轻的时候不顾一切的冲动 一场说走就走的旅行 一...
    俄语人阅读 398评论 0 2
  • 是乌云在逼近 压得楼宇一片安宁 落日在沉沦 像火球坠入大海 擦出完美的流星 你看着窗前 荷叶饿瘪了身子 菡萏削去了...
    莫愁Jessie阅读 329评论 1 16