Vue3自定义简单的Swiper滑动组件-触控板滑动&鼠标滑动&左右箭头滑动-demo

代码实现了一个基本的滑动功能，通过鼠标按下、鼠标松开和鼠标移动事件来监听滑动操作。

具体实现逻辑如下：

• 在 onMounted 钩子函数中，我们为滚动容器添加了三个事件监听器：
• mousedown 事件：当鼠标按下时，设置 control.isDown 为 true，记录鼠标起始位置 control.startX 和滚动条位置 control.scrollLeft。
• mouseup 事件：当鼠标松开时，设置 control.isDown 为 false，表示鼠标已经抬起。
• mousemove 事件：当鼠标移动时，如果 control.isDown 为 true，则计算鼠标的滑动距离 walk，并将滚动容器的 scrollLeft 属性设置为 control.scrollLeft - walk。

通过这些事件监听，我们可以实现鼠标滑动时滚动容器的滚动效果。

另外，该代码还包括了点击左右箭头按钮时的滑动功能。在 onPageLeft 方法中，通过修改滚动容器的 scrollLeft 属性，实现向左滑动一个容器宽度的距离；在 onPageRight 方法中，通过修改滚动容器的 scrollLeft 属性，实现向右滑动一个容器宽度的距离。

结构代码

业务逻辑

 样式