如何检测拉到刷新
有很多“拉到刷新”插件。我已经测试了5个。但他们没有一个跑得快(尤其是在旧智能手机上)。如何检测拉到刷新
什么是最好的(奶油用户体验性能和响应)的方式来检查拉刷新? PS:我不需要任何动画。我只是想认识如果用户“拉刷新”
性能只需要很少的代码
插件和库必须编写得灵活,一般地,为了解决很多相关问题。这意味着它们将永远比你需要的体积更大,影响性能。这也意味着你永远不必维护该代码。这是折衷。
如果性能是您的目标,请自行构建。
因为你需要的只是一个下拉检测,建立一个简单的滑动检测器。 当然,您必须根据自己的需求以及您所定位的操作系统和浏览器的事件属性,事件触发器来调整它。
var pStart = {x: 0, y:0};
var pStop = {x:0, y:0};
function swipeStart(e) {
if (typeof e['targetTouches'] !== "undefined"){
var touch = e.targetTouches[0];
pStart.x = touch.screenX;
pStart.y = touch.screenY;
} else {
pStart.x = e.screenX;
pStart.y = e.screenY;
}
}
function swipeEnd(e){
if (typeof e['changedTouches'] !== "undefined"){
var touch = e.changedTouches[0];
pStop.x = touch.screenX;
pStop.y = touch.screenY;
} else {
pStop.x = e.screenX;
pStop.y = e.screenY;
}
swipeCheck();
}
function swipeCheck(){
var changeY = pStart.y - pStop.y;
var changeX = pStart.x - pStop.x;
if (isPullDown(changeY, changeX)) {
alert('Swipe Down!');
}
}
function isPullDown(dY, dX) {
// methods of checking slope, length, direction of line created by swipe action
return dY < 0 && (
(Math.abs(dX) <= 100 && Math.abs(dY) >= 300)
|| (Math.abs(dX)/Math.abs(dY) <= 0.3 && dY >= 60)
);
}
document.addEventListener('touchstart', function(e){ swipeStart(e); }, false);
document.addEventListener('touchend', function(e){ swipeEnd(e); }, false);
我认为这正是我正在寻找的。但我得到一个错误“abs is not defined”:/ – Peter
@Peter将'abs()'改为'Math.abs()' –
@KScandrett,谢谢。对我而言,监督不力。 –
简体中有你厌倦了这些解决方案? 你需要检查这个fiddle
var mouseY = 0;
var startMouseY = 0;
$('body').on('mousedown', function (ev) {
mouseY = ev.pageY;
startMouseY = mouseY;
$(document).mousemove(function (e) {
if (e.pageY > mouseY) {
var d = e.pageY - startMouseY;
console.log("d: " + d);
if (d >= 200)
location.reload();
$('body').css('margin-top', d/4 + 'px');
}
else
$(document).unbind("mousemove");
});
});
$('body').on('mouseup', function() {
$('body').css('margin-top', '0px');
$(document).unbind("mousemove");
});
$('body').on('mouseleave', function() {
$('body').css('margin-top', '0px');
$(document).unbind("mousemove");
});
,如果你正在寻找一些插件this plugin可以帮助你在什么意义
@ mr-pyramid,大多数移动设备不会记录任何触摸的'mouse **'事件。对于台式机和笔记本电脑,无论有无触摸,这都可以正常工作,但不适用于Android,iOS或WinPhone设备。 –
您的答案是否解决了Android和移动设备的问题? –
它应该适用于大多数移动设备,但我创建此解决方案的原始代码(更庞大)仅在Android的2个浏览器,PC上的5个和Mac上的2个上测试过。您的解决方案_不适用于任何触摸操作_这是OP要求解决的问题。 –
'没有运行fast'?不要经常拉动?拉太久了?如果是后者,机会是硬件是问题 –
它总是有点抽搐。不是100%原生的感觉。 – Peter
如果你想,不要进入你可以实现的大部分代码滑动手势列表 – GeekWithGlasses