扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
slider组件与swiper组件不同，slider滑动时并不翻页，实现的是左滑时，显示右侧内容的功能
1、主要思路
思路和swiper组件类似，主要的也就是对三个触摸事件的处理：touchstart、touchmove、touchend
在touchstart事件处理程序中记录一些初始值，比如原始坐标，偏移距离；在touchmove事件处理程序中计算实时滑动的距离，让元素随之一起偏移，与swiper不同的是，slider在左滑之前，不能右滑，以及滑动时，右侧元素的宽度要同步变化；在touchend事件处理程序中计算最终的滑动距离，左滑且大于阙值则滑动固定值，右滑或小于阙值则回到起始位置，右侧元素的宽度要同步变化。
slider组件可以接收三个参数：
rightWidth： 右侧滑出宽度的百分比
isClickBack： 点击是否收起右侧
isMainSlide： 左侧是否滑动（false则覆盖左侧）
2、代码实现
页面结构：有两个slot来展示左右两边的内容
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网