本文介绍如何在Vue中实现一个左滑显示右侧内容的slider组件。通过处理touchstart、touchmove、touchend事件，记录初始坐标和偏移距离，实现滑动效果。组件接受rightWidth、isClickBack和isMainSlide三个参数，用于定制滑动行为。同时展示了组件的HTML结构、初始化设置和事件处理。最后，提供了组件的使用方法和实际效果展示。
slider组件与swiper组件不同，slider滑动时并不翻页，实现的是左滑时，显示右侧内容的功能
1、主要思路
思路和swiper组件类似，主要的也就是对三个触摸事件的处理：touchstart、touchmove、touchend
在touchstart事件处理程序中记录一些初始值，比如原始坐标，偏移距离；在touchmove事件处理程序中计算实时滑动的距离，让元素随之一起偏移，与swiper不同的是，slider在左滑之前，不能右滑，以及滑动时，右侧元素的宽度要同步变化；在touchend事件处理程序中计算最终的滑动距离，左滑且大于阙值则滑动固定值，右滑或小于阙值则回到起始位置，右侧元素的宽度要同步变化。
slider组件可以接收三个参数：
rightWidth： 右侧滑出宽度的百分比
isClickBack： 点击是否收起右侧
isMainSlide： 左侧是否滑动（false则覆盖左侧）
2、代码实现
页面结构：有两个slot来展示左右两边的内容
最低0.47元/天 解锁文章
扫一扫
4664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
