我正在开发一个简单的Web应用程序,我想让用户能够使用下拉刷新的方式刷新页面,就像Android或iOS一样。
刷新只会重新加载页面,没有其他影响:
location.reload();
我想使用jQuery Mobile或Javascript。
我正在开发一个简单的Web应用程序,我想让用户能够使用下拉刷新的方式刷新页面,就像Android或iOS一样。
刷新只会重新加载页面,没有其他影响:
location.reload();
我想使用jQuery Mobile或Javascript。
这是在body
上的,但你当然可以在其他元素中使用它。在这个例子中,html
和body
都具有100%的高度
和不同的背景颜色
,所以当拖动body时会注意到。当鼠标向下移动超过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");
});
https://github.com/luis-kaufmann-silva/jquery-p2r
将JS添加到您的头部<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>
首先,您的应用程序可以检测滚动事件。请按照以下步骤操作。
$(window).scroll(function()
{
if($(this).scrcollTop()>='somevalue may be your window height')
location.reload();
});
我认为这对你来说会起作用。