Vue左滑组件slider使用详解-创新互联

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

站在用户的角度思考问题，与客户深入沟通，找到镇雄网站设计与镇雄网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站制作、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖镇雄地区。

1、主要思路

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

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

slider组件可以接收三个参数：

rightWidth： 右侧滑出宽度的百分比

isClickBack： 点击是否收起右侧

isMainSlide： 左侧是否滑动（false则覆盖左侧）

2、代码实现

页面结构：有两个slot来展示左右两边的内容

文章名称：Vue左滑组件slider使用详解-创新互联
标题链接：http://bzwzjz.com/article/dpjdhh.html