手写一个Swiper滑动组件

github地址：react-swiper

NPM安装：

npm install react-swiper-lite

查看demo

1.工作原理

通过touchstart，touchmove和touchend实现拖动监听：

• touchstart记录第一次触摸点位置；
• touchmove记录当前移动到的位置并更新元素移动位置；
• touchend根据移动距离判断需要切换到哪个索引，并更新数据
  点击单个元素可以切换索引

2.性能优化和遇到的问题

a. touchmove高频触发
touchmove触发比较频繁，touchmove方法中会更新元素移动位置等操作，密集触发在低端机型可能会造成卡顿，使用了函数防抖减少touchmove监听触发的频次。一般屏幕刷新频率为60Hz,throttle可以间隔1/60s左右的时间(本次设置为10毫秒).

b. throttle和touchend问题
touchmove使用防抖之后，监听函数最晚会在touchmove时间结束之后，经过throttle的时间间隔才会被调用，但是touchend会在touchmove结束之后立即被调用。touchend和touchmove中都有修改元素位移的操作，在时间轴上可能会有交叉，造成元素抖动等问题。可以给touchend设置一个setTimeout,时间间隔略大于throttle设置的值。

c. touch时间和click事件冲突问题
在模拟器(真机未出现)上会出现拖动结束跳转两个元素的问题，最后发现是同时触发了click事件和touchend事件。touchend会根据拖动位移跳转到索引，click会将切换到当前元素。click会优先触发，touchend随后会被触发1-2次。解决办法：在touchMove过程中设置flag,当移动距离和touchstart位置相差超过5px时flag为true.click监听中判断如果flag为true,则return。5px主要是处理click操作手指抖动。

d. touch事件被中断问题
当系统有优先级更高的事件，比如接到电话，touch事件会被中断，如果没有touchcancel监听会造成元素显示异常。

e. 边界处理
1）拖动首尾元素时，应判断是否超出边界，超出边界拖动元素不再进行位移
2）跳转到指定元素时进行边界处理

f. transition造成卡顿问题
点击元素的时候可以进行切换，使用了transition实现过渡效果。滑动过程中触发touchmove事件中，会设置元素跟随触摸点进行位移。transition是有间隔，相当于touchmove每次触发更新元素位置，相邻的两次位置更新需要transition的间隔，就会造成卡顿。可以在touchmove的时候移除transition设置，在touchend触发的时候再添加设置。

有问题可提issue，欢迎Star