前端开发移动端滑动效果

移动端人机交互方式同PC端发生了本质的变化，在PC端使用鼠标和键盘进行交互，而移动端使用的是手指的触摸和滑动。PC端开发时主要监听鼠标事件，例如mouseEnter（鼠标进入事件）、mouseMove（鼠标移动事件）、mouseLeave（鼠标离开事件）。而在移动端监听事件为触摸的开始事件，触摸移动事件，以及触摸的结束事件。在本设计中商品详情页通过选项卡来达到切换显示基本信息、商品细节信息以及评论信息。在基本信息通过幻灯效果显示商品的大图，通过手指的滑动来控制幻灯的显示。移动端手势操作效果图：

实现的方法是监听手势的开始事件，记录手指在屏幕上的起始位置。监听手势的移动事件，获取移动中手指的坐标，并将移动的手指坐标减去起始位置的坐标得到手指移动的距离。然后实时地去改变幻灯片的transform的值来达到幻灯移动的效果。最后需要监听手势的结束事件，在该事件的处理函数中得到手指最后的位置，同样使用最后的位置减去手指的起始位置得到最终手指移动的距离，判断手指最终的移动距离是否大于滑动的临界值，本设计在此处设置临界值为100px，如果大于临界值则切换幻灯片，否则不进行切换。
在切换中特殊情况是幻灯处于第一张并向左滑动，以及最后一张并向右滑动，这两种操作都是无效的因为第一张幻灯左侧以及第二张幻灯右侧都是没有图片的。如何友好的告诉用户已近滑动到了第一张或者最后一张是提升用户体验的关键。在本设计中借鉴了各大主流电商平台的主流做法，即在无效滑动情况下降低幻灯的滑动速度让用户知道已近无法移动了。这种做法既保持了操作上的一致性，因为没有直接不响应用户的操作，又清楚明白的告诉了用户已经滑动到了尽头。
在PC端的开发过程中，使用绝对定位改变top与left的值来实现元素的移动。在第一次尝试使用绝对定位来实现，当手指滑动