vue封装一个轮播图

结构

结构布局和样式我就不多解释了 今天主要淦逻辑结构
大致结构为如下

样式如下 采用的是flex布局

看看父组件传递的数据吧

逻辑结构及原理实现

这里定义一些下面要用的属性，和可传递的属性

开始
原理简单介绍：给数组前加原先数组最后一个 给数组后加原先数组第一个
例如数组有4个 刚开始把第一张图片复制一份给数组最后加一个 把最后一张图片复制给数组第一项
调整数组从 下标1 即第二个元素开始，并控制判断轮播是不是到了第一或者最后，是则取消过渡效果返回对应原数组的位置
例如 到了最后一张 最后一张对应的是原数组的第一张 因为现在前面加了一个元素 所以应该是跳转到数组第二个元素下标为1
思考：首先应该做什么
1.给数组前后拷贝元素
2.开始写滑动代码
3.写手指滑动时的操作代码
在什么时候 执行前面两项？
我们可以在created设置一个定时器稍微延迟一点后执行，直接执行是会报错的，因为还没构建好。

1.给数组前后拷贝元素
这里我标识了每一步的做法
仔细看看 特别是拷贝数组中的对象 坑！ 千万别直接拷 不然你拷的只是地址会影响原数组对象的数据的。
还有注意的一个点就是 这里你直接修改props传过来的swiperSum（通过push 和 splice），按理说子组件修改父组件是会提示错误的，但是这里并没有。因为只有子组件修改父组件的字符串类型的数据才会报错，而修改数组，对象和参数修改是不会报错的，我们这里修改的是数组，所以不报错。
但是虽然不报错，这样也是不建议的，因为你修改了父组件传递过来的数组时，父组件的数组也同时发生了改变，而此时你并没有告诉父组件，即父组件的数组值改变了，却没有任何痕迹，这样让我们很容易不知道所以然。所以我把这种方法注释了，大家可以试试。
还是的采用$emit向父组件发送事件让父组件进行修改，不要子组件修改父组件传来的数据，这样很不好，牢记哦。

封装一个滑动的方法

2.开始写滑动代码
开始滑动不能直接卸载一个方法里面，应该分为多个方法各司其职，这样在需要用到某个方法时可以和好的抽离过来，如果是一个则行不通。
先封装一个启动定时器滑动和停止定时器
传递给滑动方法
滑动方法对当前滑动状态管理 和 过渡效果添加 并滑动一次
每次滑动完需要判断是不是我们添加的元素

判断元素是否是我们添加的元素 通过之前定义的下标可以很好判断
如果范围在 1-数组长度内则不改变 而如果是 0 和数组长度+1则是我们添加的
需要进行取消动画过渡然后瞬移到复制源的对应数组

3.写监听用户手指滑动时的方法
从手指开始接触屏幕开始到实时移动手指
开始接触需要判断是否在滑动 停止计时器 记录开始坐标
实时移动时需要实时控制轮播图的移动 计算出偏移量则可以实现精确移动了

手指离开屏幕
离开要判断偏移量是否大于自己设置的 大于则进行切换 再通过正负决定切换上一张或者下一张
若小于设置的偏移量 则归为到当前轮播图 currindex不变就可以了
为0则是没改变，那就不执行
执行完需要重新启动定时器

附加方法 可添加左右按钮 pc端可以用 移动端一般不用
这个很简单就不做说明了

效果图

END

想要源码的可以评论和私信哦 源码里对各个结构都有相应解释，帮助你更好理解
点个赞吧！米娜