项目需求是手指上滑则隐藏顶部组件,下滑则显示顶部组件。所以需要在监听组件中绑定 touch 事件获取对应的值
这里 div 是表示的是一个将 listData 数组对象中的每一项元素都循环表示出来,监听 getTouchstartY() 函数用来获取手指在最开始触及屏幕时的 y 轴坐标,监听 touchmove() 函数用来判断手指滑动方向
getTouchstartY()函数代码为:
vue js 判断长按触发及手指的上滑、下滑、左滑、又滑
html 代码为
@touchstart： 触发按下事件
@touchmove：触发移动事件，通过 x 轴 y 轴移动的距离判断是左滑右滑
touchmove 的最后坐标减去 touchstart 的起始坐标，X 的结果如果正数，则说明手指是从左往右划动；X 的结果如果负数，则说明手指是从右往左划动；Y 的结果如果正数，则说明手指是从上往下划动；Y 的结果如果负数，则说明手指是从下往上划动。
但是：
实际上手指在手机上面滑动时很难做到直上直下的滑动；只要稍微有点斜，就会被 x 轴的判断条件接管，而与我们的实际操作相背离。此时就需要添加特殊的判断技巧，代码如下：
@touchend：触发结束移动事件 通过事件判断是否是长按事件