From 9c73bd9f7e0e5f7289442b646ac5e5a158a25fed Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Thu, 14 Dec 2023 19:10:45 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8F=98=E9=87=8F=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E5=92=8C=E4=BB=A3=E7=A0=81=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/carousel.js | 8 ++++---- src/modules/lay.js | 39 ++++++++++++++++++++++----------------- src/modules/layer.js | 4 ++-- src/modules/slider.js | 6 +++--- 4 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/modules/carousel.js b/src/modules/carousel.js index ca517939..df82a5e6 100644 --- a/src/modules/carousel.js +++ b/src/modules/carousel.js @@ -344,11 +344,11 @@ layui.define(['jquery', 'lay'], function(exports){ lay.touchSwipe(touchEl, { onTouchEnd: function(e, state){ var duration = Date.now() - state.timeStart; - var delta = isVertical ? state.deltaY : state.deltaX; - var speed = delta / duration; - var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(delta) > touchEl[isVertical ? 'height' : 'width']() / 3; + var distance = isVertical ? state.distanceY : state.distanceX; + var speed = distance / duration; + var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(distance) > touchEl[isVertical ? 'height' : 'width']() / 3; if(shouldSwipe){ - that.slide(delta > 0 ? '' : 'sub'); + that.slide(distance > 0 ? '' : 'sub'); } } }) diff --git a/src/modules/lay.js b/src/modules/lay.js index cda5d3b0..65dd2439 100644 --- a/src/modules/lay.js +++ b/src/modules/lay.js @@ -533,10 +533,10 @@ /** * @typedef touchSwipeState - * @prop {{x: number,y: number}} coordsStart - 初始坐标 - * @prop {{x: number,y: number}} coordsEnd - 结束坐标 - * @prop {number} deltaX - X 轴变化量 - * @prop {number} deltaY - Y 轴变化量 + * @prop {{x: number,y: number}} pointerStart - 初始坐标 + * @prop {{x: number,y: number}} pointerEnd - 结束坐标 + * @prop {number} distanceX - X 轴移动距离 + * @prop {number} distanceY - Y 轴移动距离 * @prop {'none'|'right'|'left'|'up'|'down'} direction - 滑动方向 * @prop {Date} timeStart 开始时间 */ @@ -557,10 +557,10 @@ if(!targetElem || !lay.touchEventsSupported()) return; var state = { - coordsStart: {x:0, y:0}, - coordsEnd: {x:0, y:0}, - deltaX: 0, - deltaY: 0, + pointerStart: {x:0, y:0}, + pointerEnd: {x:0, y:0}, + distanceX: 0, + distanceY: 0, direction:'none', // 'up','down','left','right','none timeStart: null } @@ -569,22 +569,22 @@ if(e.touches.length !== 1) return; bindEvents(); state.timeStart = Date.now(); - state.coordsStart.x = state.coordsEnd.x = e.touches[0].clientX; - state.coordsStart.y = state.coordsEnd.y = e.touches[0].clientY; + state.pointerStart.x = state.pointerEnd.x = e.touches[0].clientX; + state.pointerStart.y = state.pointerEnd.y = e.touches[0].clientY; options.onTouchStart && options.onTouchStart(e, state); } var onMove = function(e){ e.preventDefault(); - state.coordsEnd.x = e.touches[0].clientX; - state.coordsEnd.y = e.touches[0].clientY; - state.deltaX = state.coordsStart.x - state.coordsEnd.x; - state.deltaY = state.coordsStart.y - state.coordsEnd.y; - if(Math.abs(state.deltaX) > Math.abs(state.deltaY)){ - state.direction = state.deltaX > 0 ? 'left' : 'right'; + state.pointerEnd.x = e.touches[0].clientX; + state.pointerEnd.y = e.touches[0].clientY; + state.distanceX = state.pointerStart.x - state.pointerEnd.x; + state.distanceY = state.pointerStart.y - state.pointerEnd.y; + if(Math.abs(state.distanceX) > Math.abs(state.distanceY)){ + state.direction = state.distanceX > 0 ? 'left' : 'right'; }else{ - state.direction = state.deltaY > 0 ? 'up' : 'down'; + state.direction = state.distanceY > 0 ? 'up' : 'down'; } options.onTouchMove && options.onTouchMove(e, state); } @@ -606,6 +606,11 @@ targetElem.removeEventListener('touchcancel', onEnd); } + // 防止事件重复绑定 + if(targetElem.__lay_touchswipe_cb_){ + targetElem.removeEventListener('touchstart', targetElem.__lay_touchswipe_cb_); + } + targetElem.__lay_touchswipe_cb_ = onStart; targetElem.addEventListener('touchstart', onStart); } diff --git a/src/modules/layer.js b/src/modules/layer.js index 3f16df5f..2758e0d1 100644 --- a/src/modules/layer.js +++ b/src/modules/layer.js @@ -1609,9 +1609,9 @@ layer.photos = function(options, loop, key){ var lay = window.layui.lay || window.lay; var touchEndCallback = function(e, state){ var duration = Date.now() - state.timeStart; - var speed = state.deltaX / duration; + var speed = state.distanceX / duration; var threshold = win.width() / 3; - var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(state.deltaX) > threshold; + var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(state.distanceX) > threshold; if(!shouldSwipe) return; if(state.direction === 'left'){ dict.imgnext(true); diff --git a/src/modules/slider.js b/src/modules/slider.js index ea0dadd7..93455543 100644 --- a/src/modules/slider.js +++ b/src/modules/slider.js @@ -335,10 +335,10 @@ layui.define(['jquery', 'lay'], function(exports){ sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){ var othis = $(this); othis.on('mousedown touchstart', function(e){ - e = e.originalEvent || window.event; + e = e || window.event; if(e.type === 'touchstart'){ - e.clientX = e.touches[0].clientX; - e.clientY = e.touches[0].clientY; + e.clientX = e.originalEvent.touches[0].clientX; + e.clientY = e.originalEvent.touches[0].clientY; } var oldleft = othis.parent()[0].offsetLeft;