# ext实现轮播图组件
因业务需要,控制器这里也没轮播图组件,所以封装一个,方便以后使用。
改造成通用组件是罗政做的,轮播逻辑是林政光做的。
# 轮播原理
轮播图就是自动切换页面,原理无外乎就是切换item位置。
- 定位,切换left
- css3 transform
从性能来说肯定是transform更好(可以通过translate3d开启gpu加速),但为了兼容低版本浏览器,这里还是使用的定位的方式。
然后根据传入的数组,循环生成dom,拼接到轮播区域。
通过定时器切换位置。
# 使用步骤
传入的内容:slideList
包括图片、标题、描述、插槽
下面是例子
[ { img: "images/networking/networkFocus.svg", title: 标题, describe: 描述, slot: 插槽,在描述下预留了插槽区域,也可通过定位移动到需要的位置 } ]
图片、标题、描述都是普通功能,下面来讲讲slot插槽。
灵感同样来自vue。
这里没有做具名插槽,要做的话也很容易,只是暂时没这需求,所以就没做。
slot可以传入普通文字,或者html,位置是在描述下方,可以通过定位去调整位置。我就通过slot给图片上加了动画。
基本配置项
itemWidth: 600, // 每个item的宽度 itemHeight: 291, // 每个item的高度 autoPlay: true, // 是否自动播放 speed: 8000, // 播放速度 pagination: true, // 是否开启分页器
都是一些常用的,名字参考的swiper