位置: 编程技术 - 正文
基于vue2.0实现简单轮播图(vue2.x)
编辑：rootadmin推荐整理分享基于vue2.0实现简单轮播图(vue2.x)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue2.0搭建项目,基于vue的ui,vue2.0搭建,vue2.x,基于vue的app,vue2.x,基于vue3.0,基于vue3.0,内容如对您有帮助，希望把文章链接给更多的朋友！
因为之前一直在忙公司的项目，vue这块就生疏了不少，正好借这个小demo复习下vue的知识。
先来个效果图：
如图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；而下方按钮会根据当前图片自动变红且可以手动控制当前图片。
思路：
整个demo分为轮播图片和控制span两个部分。按照前端工程化的需求来说，这两个部分应该解耦成两个component最后再导入页面比较合理，但由于demo较为简单，作为练手就不搞那么复杂了，对项目有追求【强迫症】的童鞋可以往组件化的目标靠，具体方法参考我之前的博文。
第一步，先写出整体框架：
我们使用v-for列表渲染两个部分，值得注意的是列表渲染最好要提供一个key值，至于为什么官方文档说得很复杂，就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug，官方给出的建议也是尽可能在列表渲染的时候加上key值，百利无一害，养成习惯就好。
第二步：
在上一步我们渲染的是一个img数组，具体：
然后实现轮播的原理就是创建一个变量与当前遍历的index值比对，若相同则显示，否则隐藏；同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变红。
第三步：
创建定时器，每隔2.5s给变量mark+1，挂载到钩子函数created：
第四步：
加上css文件，出现基本的效果。
第五步：
现在我们得到的效果还是每隔一段时间图片突然变成另外一张，用户体验很差，达不到轮播的效果。所以我们得加上过渡效果。html：
css：
这里因为我们是给一个渲染列表加上过渡效果所以要使用transition-group而不是单元素的transition，否则会报错。另外就是记得给transition-group加上tag="ul"属性，不然就会被默认渲染成span了。css部分需要关联name属性值作为前缀。
第六步：
给下方按钮增加切换图片的点击事件。最后我们再加上移入/移出实现关闭/打开定时器效果，即用户鼠标停留当前图片停止滚动，移出则继续。
这个地方卡了我很长时间，因为根据原生js定时器的思路在定义定时器的时候就应该设置变量，然后把这个变量传到clearInterval函数里。问题在于vue函数里设置变量很不可取，存在定义域的问题，开启定时器跟关闭定时器是两个函数，不能共用一个变量。后来灵机一动，想到不如把变量写在data里面？一试，成功！
至此，轮播图的功能基本实现。当然，项目做的比较简陋也存在一些bug，如当一个切换动画未完成前点击另一个按钮会出现神奇的交错现象，由于时间关系还未解决，希望各位看官能提出宝贵的建议！
标签: vue2.x
本文链接地址:https://www.jiuchutong.com/biancheng/378899.html 转载请保留说明！上一篇：Vue父子模版传值及组件传值的三种方法(vue父子组件传值props)
下一篇：使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能(使用驱动器u盘之前需要格式化)
