Vue 无缝轮播实现

实现原理:

1.采用css3 实现 滚动效果(过渡动画)

2.采用 dom 事件监听 监听 过度动画

3.无缝原理 

假如有 [a, b, c] 三个切换页面,当页面滚动到c时,直接切回a 会出现 :

第一种情况: 会出现 c->b->a 回滚 

第二种情况: 到c后 ,顺切到 a 会出现闪屏效果

所以,我采用 把页面变成 [c', a, b, c, a'] 这种形式 ,从 a开始 滚, 滚到c后,继续滚到 a',

滚到a‘后瞬间,把页面切到 a,因为 a 和 a’ 一样 所以 不会出现 闪屏效果。 反方向原理一样。

代码效果地址

代码如下:

布局:


布局

js:





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

推荐阅读更多精彩内容