如何使用 jQuery Mobile 或 Javascript 在 Web 应用程序上刷新下拉页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30071319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make pull down Page refresh on Web app using jQuery Mobile or Javascript
提问by Yasser B.
I'm developing a simple web application, I want to give the ability to the user to refresh the page with pull down refresh thing like android or iOs.
我正在开发一个简单的 Web 应用程序，我想让用户能够使用下拉刷新功能（如 android 或 iOs）刷新页面。
the refresh it will only lead to reload the page nothing else :
刷新它只会导致重新加载页面没有别的：
location.reload();
I'd like to use jQuery Mobile or Javascript.
我想使用 jQuery Mobile 或 Javascript。
回答by Samurai
This is on bodybut you can have it in other elements of course. In this example htmland bodyare with 100% heightand different background-colors so you'll notice when dragging the body down. Mouse moves down more than 200pxand page will reload.
这是开启的，body但你当然可以在其他元素中使用它。在这个例子中html，并body与100% height不同background-colorS左右，你会拖着身体向下时发现。鼠标向下移动超过200px页面将重新加载。
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");
});
回答by BritishSam
This is a great plugin for pull to refresh
这是一个很棒的下拉刷新插件
https://github.com/luis-kaufmann-silva/jquery-p2r
https://github.com/luis-kaufmann-silva/jquery-p2r
add the js to your head
将 js 添加到您的头上
script
脚本
<script>
$(document).ready(function(){
$(".scroll").pullToRefresh({
refresh:200
})
.on("refresh.pulltorefresh", function (){
location.reload();
});
});
</script>
<div class="scroll">
<div class="refresh">
Pull To Refresh
</div>
<div class="container">
content
</div>
</div>
do a minus margin-top on the scroll class to make the pull to refresh to be hidden, change refresh:200 to how long the pull takes to refresh. e.g at the moment its set to refresh after its pulled for 200 pixels
在滚动类上做一个负边距顶部，使刷新的拉动隐藏，将 refresh:200 更改为拉动刷新所需的时间。例如，目前它设置为在拉动 200 像素后刷新
回答by Murali
First, your application is in position to detect the scrolling event. Do like this.
首先，您的应用程序可以检测滚动事件。这样做。
$(window).scroll(function()
{
if($(this).scrcollTop()>='somevalue may be your window height')
location.reload();
});
I think this is gonna work for you.
我认为这对你有用。
