实现基于React的移动端Swiper组件

之前没怎么接触过移动端，最近工作上要求写一个H5页面，用到了 swiper 组件，用的是同事写的一个，后来看了一下源码，觉得有很多值得优化的地方，就站在巨人的肩膀上去优化了一下。由于时间紧迫，仍有很多不足，后续我也会继续优化。已经把它发布在 npm 上，欢迎大家 star ，如果您愿意使用我们的组件，并且有任何问题，可以提 issue ， 我们也会尽快解决。

演示

使用方法

import Swiper from 'awesome-react15-swiper';
import 'awesome-react15-swiper/lib/index.css';

let params = {
    observer: true,
    slideChange: (index) => {
        console.log(index);
    }
}
<Swiper {...params}>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</Swiper>
复制代码

原理解析

假设swiper有三张图片，如下图所标注的，分别是1，2，3，我们会复制第一张图，放在最后，即变成了4张图（原因我待会讲）

• index 代表索引，从 0 开始
• 每张图左侧的 0px ， 100px ， 200px ， 300px 代表距离最左侧的距离

我们会把 wdt-swiper-wrap 的宽度设置为这4个图的宽度之和，并为它设置 translation 动画，动态的去改变 left 属性，以达到左右切换动画的效果。 left 的大小是通过当前图片的索引 index 计算得来的，所以我们想要有动画，只需要动态的设置 activeIndex 即可。

下面要说一下为什么要复制第一张图放在最后，因为我们在滑动到第三幅图的时候，继续往左滑动，过程中一定会出现右侧空白，而我们复制第一张图放在最后，就可以巧妙的避免了这个问题。那如果我往右滑动，滑动到第一幅图的时候，继续右滑，岂不是也会出现空白？这个问题我是这样解决的，如果是第一张图右滑，我会把left设置成最后一幅图（复制第一张图）的对应的位置，也可以理解成，虽然是第一张图右滑，其实是在对最后一张图右滑。所以左滑也可以用同样的方式处理，这块代码我没有做修改，是一个优化点。看下图会很清晰地看到播放原理。

另外，轮播的时候，到最后一张图，如果直接跳到第二张图会出现动画的逆向，所以这个时候应该先取消动画，然后等到 left 调整后，再开启动画。我在代码中加入大量注释，有兴趣的话，可以到代码中看注释