Vue组件slider如何实现左滑功能及详细使用技巧？

本文共计961个文字，预计阅读时间需要4分钟。

slider组件与swiper组件不同，slider滑动时不会翻页，实现的实际上是左滑时显示右侧内容的功 能。主要思路是：思路和swiper组件类似，主要也是对三个触摸事件的处理：touchstart、touchmove。

slider组件与swiper组件不同，slider滑动时并不翻页，实现的是左滑时，显示右侧内容的功能

1、主要思路

思路和swiper组件类似，主要的也就是对三个触摸事件的处理：touchstart、touchmove、touchend

在touchstart事件处理程序中记录一些初始值，比如原始坐标，偏移距离；在touchmove事件处理程序中计算实时滑动的距离，让元素随之一起偏移，与swiper不同的是，slider在左滑之前，不能右滑，以及滑动时，右侧元素的宽度要同步变化；在touchend事件处理程序中计算最终的滑动距离，左滑且大于阙值则滑动固定值，右滑或小于阙值则回到起始位置，右侧元素的宽度要同步变化。