mirror of https://github.com/layui/layui
优化变量命名和代码细节
parent
62f5abdd9b
commit
9c73bd9f7e
|
@ -344,11 +344,11 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||||
lay.touchSwipe(touchEl, {
|
lay.touchSwipe(touchEl, {
|
||||||
onTouchEnd: function(e, state){
|
onTouchEnd: function(e, state){
|
||||||
var duration = Date.now() - state.timeStart;
|
var duration = Date.now() - state.timeStart;
|
||||||
var delta = isVertical ? state.deltaY : state.deltaX;
|
var distance = isVertical ? state.distanceY : state.distanceX;
|
||||||
var speed = delta / duration;
|
var speed = distance / duration;
|
||||||
var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(delta) > touchEl[isVertical ? 'height' : 'width']() / 3;
|
var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(distance) > touchEl[isVertical ? 'height' : 'width']() / 3;
|
||||||
if(shouldSwipe){
|
if(shouldSwipe){
|
||||||
that.slide(delta > 0 ? '' : 'sub');
|
that.slide(distance > 0 ? '' : 'sub');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -533,10 +533,10 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef touchSwipeState
|
* @typedef touchSwipeState
|
||||||
* @prop {{x: number,y: number}} coordsStart - 初始坐标
|
* @prop {{x: number,y: number}} pointerStart - 初始坐标
|
||||||
* @prop {{x: number,y: number}} coordsEnd - 结束坐标
|
* @prop {{x: number,y: number}} pointerEnd - 结束坐标
|
||||||
* @prop {number} deltaX - X 轴变化量
|
* @prop {number} distanceX - X 轴移动距离
|
||||||
* @prop {number} deltaY - Y 轴变化量
|
* @prop {number} distanceY - Y 轴移动距离
|
||||||
* @prop {'none'|'right'|'left'|'up'|'down'} direction - 滑动方向
|
* @prop {'none'|'right'|'left'|'up'|'down'} direction - 滑动方向
|
||||||
* @prop {Date} timeStart 开始时间
|
* @prop {Date} timeStart 开始时间
|
||||||
*/
|
*/
|
||||||
|
@ -557,10 +557,10 @@
|
||||||
if(!targetElem || !lay.touchEventsSupported()) return;
|
if(!targetElem || !lay.touchEventsSupported()) return;
|
||||||
|
|
||||||
var state = {
|
var state = {
|
||||||
coordsStart: {x:0, y:0},
|
pointerStart: {x:0, y:0},
|
||||||
coordsEnd: {x:0, y:0},
|
pointerEnd: {x:0, y:0},
|
||||||
deltaX: 0,
|
distanceX: 0,
|
||||||
deltaY: 0,
|
distanceY: 0,
|
||||||
direction:'none', // 'up','down','left','right','none
|
direction:'none', // 'up','down','left','right','none
|
||||||
timeStart: null
|
timeStart: null
|
||||||
}
|
}
|
||||||
|
@ -569,22 +569,22 @@
|
||||||
if(e.touches.length !== 1) return;
|
if(e.touches.length !== 1) return;
|
||||||
bindEvents();
|
bindEvents();
|
||||||
state.timeStart = Date.now();
|
state.timeStart = Date.now();
|
||||||
state.coordsStart.x = state.coordsEnd.x = e.touches[0].clientX;
|
state.pointerStart.x = state.pointerEnd.x = e.touches[0].clientX;
|
||||||
state.coordsStart.y = state.coordsEnd.y = e.touches[0].clientY;
|
state.pointerStart.y = state.pointerEnd.y = e.touches[0].clientY;
|
||||||
|
|
||||||
options.onTouchStart && options.onTouchStart(e, state);
|
options.onTouchStart && options.onTouchStart(e, state);
|
||||||
}
|
}
|
||||||
|
|
||||||
var onMove = function(e){
|
var onMove = function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
state.coordsEnd.x = e.touches[0].clientX;
|
state.pointerEnd.x = e.touches[0].clientX;
|
||||||
state.coordsEnd.y = e.touches[0].clientY;
|
state.pointerEnd.y = e.touches[0].clientY;
|
||||||
state.deltaX = state.coordsStart.x - state.coordsEnd.x;
|
state.distanceX = state.pointerStart.x - state.pointerEnd.x;
|
||||||
state.deltaY = state.coordsStart.y - state.coordsEnd.y;
|
state.distanceY = state.pointerStart.y - state.pointerEnd.y;
|
||||||
if(Math.abs(state.deltaX) > Math.abs(state.deltaY)){
|
if(Math.abs(state.distanceX) > Math.abs(state.distanceY)){
|
||||||
state.direction = state.deltaX > 0 ? 'left' : 'right';
|
state.direction = state.distanceX > 0 ? 'left' : 'right';
|
||||||
}else{
|
}else{
|
||||||
state.direction = state.deltaY > 0 ? 'up' : 'down';
|
state.direction = state.distanceY > 0 ? 'up' : 'down';
|
||||||
}
|
}
|
||||||
options.onTouchMove && options.onTouchMove(e, state);
|
options.onTouchMove && options.onTouchMove(e, state);
|
||||||
}
|
}
|
||||||
|
@ -606,6 +606,11 @@
|
||||||
targetElem.removeEventListener('touchcancel', onEnd);
|
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);
|
targetElem.addEventListener('touchstart', onStart);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1609,9 +1609,9 @@ layer.photos = function(options, loop, key){
|
||||||
var lay = window.layui.lay || window.lay;
|
var lay = window.layui.lay || window.lay;
|
||||||
var touchEndCallback = function(e, state){
|
var touchEndCallback = function(e, state){
|
||||||
var duration = Date.now() - state.timeStart;
|
var duration = Date.now() - state.timeStart;
|
||||||
var speed = state.deltaX / duration;
|
var speed = state.distanceX / duration;
|
||||||
var threshold = win.width() / 3;
|
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(!shouldSwipe) return;
|
||||||
if(state.direction === 'left'){
|
if(state.direction === 'left'){
|
||||||
dict.imgnext(true);
|
dict.imgnext(true);
|
||||||
|
|
|
@ -335,10 +335,10 @@ layui.define(['jquery', 'lay'], function(exports){
|
||||||
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
|
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
|
||||||
var othis = $(this);
|
var othis = $(this);
|
||||||
othis.on('mousedown touchstart', function(e){
|
othis.on('mousedown touchstart', function(e){
|
||||||
e = e.originalEvent || window.event;
|
e = e || window.event;
|
||||||
if(e.type === 'touchstart'){
|
if(e.type === 'touchstart'){
|
||||||
e.clientX = e.touches[0].clientX;
|
e.clientX = e.originalEvent.touches[0].clientX;
|
||||||
e.clientY = e.touches[0].clientY;
|
e.clientY = e.originalEvent.touches[0].clientY;
|
||||||
}
|
}
|
||||||
|
|
||||||
var oldleft = othis.parent()[0].offsetLeft;
|
var oldleft = othis.parent()[0].offsetLeft;
|
||||||
|
|
Loading…
Reference in New Issue