自定义手势判断日历上的应用在移动端，日历通常显示为当月的日期记录。切换月份时，需要通过手势左右滑动来切换月份。下面说明如何自己完成一个滑动手势的判断和逻辑处理。这里借助Vue的自定义指令来解释代码。SELECTWRAP_DOM是绑定的DOM元素bind(el,binding,vnode){varstartX=0varstartY=0varendX=0varendY=0constSELECTWRAP_DOM=elvarjudgeX=0varjudgeY=0varlockY=falseSELECTWRAP_DOM.addEventListener('touchstart',(event)=>{//监听滑动开始，详见下文}SELECTWRAP_DOM.addEventListener('touchmove',(event)=>{//监听滑动，详见下文}SELECTWRAP_DOM.addEventListener('touchend',(event)=>{//监听滑动结束，详见下文}}首先获取dom元素，绑定touchstart事件，同时作为手势的起点判断SELECTWRAP_DOM.addEventListener('touchstart',(event)=>{vartouch=event.touches[0]//获取当前触摸点的起点坐标，包括X,YstartX=touch.pageXstartY=touch.pageY})然后监听dom上的touchmove事件，但是这个事件只获取开始的第一个点，作为手势判断的结束点SELECTWRAP_DOM.addEventListener('touchmove',(event)=>{vartouch=event.targetTouches[0]//手势滑动时，手势坐标不断变化，最后一个点的坐标作为最终的结束坐标endX=touch.pageXendY=touch.pageY//这里记录拖动后的第一个点，拖动过程中只记录一次if(judgeX==0&&judgeY==0){judgeX=endXjudgeY=endY}letYlength=Math.abs(judgeY-startY)letXlength=Math.abs(judgeX-startX)//根据等边三角形计算角度关系lockY=Ylength/Xlength<1if(lockY){//屏蔽Y轴滑动event.preventDefault()//执行X轴滑动动画SELECTWRAP_DOM.style.transform=`translateX(${endX-startX}px)`}//如果没有判断为X轴滑动，则不执行动画，只执行上下})最后监听touchend事件，重置判断数据并做其他处理SELECTWRAP_DOM.addEventListener('touchend',(event)=>{vardistanceX=endX-startX//恢复拖动效果，偏移量为0SELECTWRAP_DOM.style.transform=`translateX(0px)`/*如果当前偏移量存在且偏移量>50，因为小的偏移量可能是用户误操作造成的，起点和终点的X轴发生了变化，则为可能用户直接点击，则endX必须为0，距离计算会产生偏移量，所以排除这种情况，执行自定义命令函数*///如果X轴滑动，则执行命令，否则数据将被清除以供下次滑动检测if(distanceX!=0&&(Math.abs(distanceX)>50&&lockY)&&startX!=0&&am;endX!=0)binding.value(distanceX)//恢复缓存的坐标供下次使用startX=0startY=0endX=0endY=0judgeX=0judgeY=0lockY=false})结论：在比率判断之前，采用固定数值判断。缺点是在不同的屏幕下，可能会有误判的可能，或者Y轴敏感，或者X轴敏感，体验不好。最后使用比例关系后，效果明显提升。
