该文章请对应源码阅读,github源码地址,DEMO使用地址,线上DEOM展示。
做一个vue基础组件系列,使用vue以最简洁的方式实现常用组件,可用于快速二次定制化开发。
(๑•̀ㅂ•́)و✧不定时更新,欢迎 star,讨论,指教。
实现原理
1. 无缝滚动预处理
为了无缝滚动,在传进来的imgs数组首部增加末尾元素,在尾部追加首元素,看图1
2. 数据绑定视图
(1)activeIndex为当前显示的轮播图索引,然后只需要对activeIndex进行操作,watch监听activeIndex的变化,一旦到达了边界就重置activeIndex,显示出对应的图片。过渡动画则由css3的transition属性完成。
(2)isResetIndex为watch监听的activeIndex变化时,判断此次变化是否activeIndex已经到达了边界,如果是则为true,同时需要重置activeIndex(且此过程为瞬间完成,无过渡动画,详情见图2),反之false
3.边界变化的两种情况