[Vue组件]一口气码了一个适用性高的卡片式轮播图组件

·  阅读 763
[Vue组件]一口气码了一个适用性高的卡片式轮播图组件

1.前言

最近做店铺页面,需要一个卡片式轮播组件。网上很多都是类似于网易云的普通轮播组件,探索几番还是决定自己写一个组件出来。

设计出来的效果图:

垂直模式:

水平模式:

注:支持通过传入参数添加图片的class类名以及被选中的图片的class类名

2.编写思路

编写轮播组件要克服的难点是切换图片时的动画设计。以下是我的设计思路:

1.存在两个div元素,分别为.image-list.virtual-list.image-list包裹着.virtual-list.virtual-list包裹着要轮播显示的图片.image,如下所示:

其中,.image-list元素的宽高如图的伪代码所示根据轮播图片的宽高以及margin尺寸动态生成。

2.要往左轮播一张图片时,先插入一张即将要出现的图片。下图以绿色方块代表插入的新图片,此时.virtual-list右侧溢出。

3.把.virtual-list往作移动一个图片的距离,此时.virtual-list左边溢出。但因.image-listoverflow设置为hidden。故.virtual-list的溢出部分不被显示。此时的.virtual-list在浏览器的渲染效果下看起来和没插入新图片一样。

4.上面步骤中动画结束后,在.virtual-list中删除最右边溢出的图片元素。到此一个轮播动作过程就完成了。

3.组件使用说明

代码我就不贴出来了,300行而已。想要调用直接到我的github网址下复制这个ImageCarousel.vue组件以及img文件夹(切换按钮用到的图标)既可 因为已封装成Vue组件,所以通过Vue引入使用。涉及到的参数和事件如下所示:

参数Attributes

参数说明类型可选值默认值是否必须
images要展示的图片{Array<String>}--
show-size轮播图的数量Number-3
image-class为轮播图添加的类名String--
image-active-class轮播图被选中时添加的类名String--
auto-slide是否自动轮播Boolean-false
auto-slide-interval开启自动轮播时,切换图片的时间间隔Number-3000
mode选择展示的模式,有水平模式和垂直模式Stringhorizontal/verticalhorizontal
slide-time切换图片过程中动画的事件Number-300

事件Events

事件类型说明回调参数
autoslide-image开启自动轮播时,每切换图片都触发的事件轮播到的图片的url
click-image点击图片时触发的事件被点击图片的url
分类:
前端
标签:
分类:
前端
标签: