vue轮播图组件

原创 番茄pan 随笔 vue.js组件 143阅读 27 天前 举报

最近闲着无聊就尝试着自己写个轮播图组件玩玩 (代码写的不够优雅望各位见谅)

这是githu地址

实现的功能如下图

  • autoPlay自动播放
  • 上一张下一张

主要是使用.vue单文件形式实现
template代码如下所示

其中外部组件需要使用传入的属性为imgArray数组和autoPlay(可选||默认false 间隔时间5s)
提供的imgArray数据结构为

实现轮播的方式是图片容器的left移动配合transition的过渡效果
but 貌似效果有点卡 如果有更好的实现方式,欢迎提出

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复