.gd{
transition: all .5s;
-moz-transition: all .5s; /* Firefox 4 */
-webkit-transition: all .5s; /* Safari 和 Chrome */
-o-transition: all .5s; /* Opera */
}
<div id="top" class="gd" style="display: none;">
<span class="loading"> 上拉加载</span>
<div class="load gd" style="display: none;" >
<div style="display:flex;justify-content: center;align-items: center;height:0.8rem;">
<img style="width:0.3rem;" src="/static/mobile/images/weibo/load.gif" alt=""> 加载中
</div>
</div>
</div>
$(document).ready(function(){
var is_tap = false;
var top = 0;
var end = 0;
var h = 0;
var is_shuaxin = false;
var max_h = window.screen.height*0.1
var touchstartY;
$("#data").on('touchmove', function(e) {
if($(document).scrollTop() == 0 && is_tap == true && data.page == 1){
end = e.changedTouches[0].clientY;
h = (end-top)/2;
if( h > max_h){
h = max_h;
is_shuaxin = true;
}
$('#top').removeClass('gd');
$('#top').attr('style','display: flex;align-items: center;align-items: center; justify-content: center; color:#999;');
$('.loading').show();
$('.load').hide();
$('#top').css('height',h+"px");
}else{
is_tap = false;
$('#top').hide();
}
var events = e.touches[0] || e;
//注意app.scrollTop始终为0
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度
var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度(可视部分高度)
var scrollHeight = document.scrollHeight; //所有内容的高度
if (
events.clientY > touchstartY &&
scrollTop === 0 &&
e.cancelable
) {
e.preventDefault(); //禁止到顶下拉
} else if (
scrollTop + clientHeight > scrollHeight &&
e.cancelable
) {
// event.preventDefault(); //禁止到底上拉
}
});
$("#data").on('touchstart', function(e) {
if($(document).scrollTop() == 0 && data.page == 1 ){
is_tap = true;
top = e.changedTouches[0].clientY;
}
var events = e.touches[0] || e;
touchstartY = events.clientY; //获取触摸目标在视口中的y坐标
});
$("#data").on('touchend', function(e) {
if($(document).scrollTop() == 0 && data.page == 1 ){
is_tap = false;
$("#top").attr('class','gd');
if(is_shuaxin == true && data.page == 1){
$('#top').css('height',"0.8rem");
}else{
$('#top').css('height',"0px");
}
}
});
$('#top').on('webkitTransitionEnd', function(e) {
$(".loading").hide();
$('.load').show();
if(is_shuaxin == true){
//加载逻辑
}
}else{
$('#top').hide();
}
});
HTML 下拉刷新&禁止微信下拉
最新推荐文章于 2021-06-04 22:07:07 发布