原生js下拉刷新功能（jquery）。（完整demo）

最新推荐文章于 2024-07-14 03:40:51 发布

AILIHEIHEI

最新推荐文章于 2024-07-14 03:40:51 发布

阅读量767

点赞数 2

文章标签： javascript jquery css3

本文链接：https://blog.csdn.net/qq_42780323/article/details/105390523

版权

这个完整的代码。触摸下拉可以刷新。

<!DOCTYPE html>

<head>

<!-- <script src="./js/jquery-3.4.1.min.js">

</script> -->

<!-- <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

</script>

-->

<title>进行上啦刷新，下拉加载</title>

<style>

.refresh{

display:none;

position:relative;

border:1px solid blue;

margin-bottom:5px;

}

.circle{

width:20px;

height:20px;

background:hotpink;

margin: auto;

}

</style>

</head>

<body>

嘿嘿，下拉了，松手我就会刷新

</div>

第一块

</div>

第二块

</div>

第三块

</div>

第四块

</div>

第五块

</div>

第六块

</div>

var startY,endY,distance

var doc=document.documentElement||document.body;//这是一个dom对象，不要和jquery方法混用

$(doc).on('touchstart',function(e){

var e=e||window.e

console.log(e,startY,1111)

startY=e.touches[0].clientY

})

$(doc).on('touchmove',function(e){

var e=e||window.e

endY=e.touches[0].clientY;

distance=endY-startY

if(30<=distance&&distance<=60){

$('.refresh').css({'display':'block','height':distance+'px'})

}

if(60<=distance&&distance<=90){

//超过60px就进行二分之一慢速处理。

$('.refresh').css('height',60+(distance-60)/2+'px')

}

if(distance>=90){

//超过90px就进行四分之一慢速处理。75是临界换速当时div块的高度

$('.refresh').css('height',75+(distance-90)/4+'px')

}

console.log(distance,endY)

})

$(doc).on('touchend',function(e){

var e=e||window.e;

//小块开始旋转效果，模仿圈圈'transform':'rotate(300deg)','transition':'all 1s','transform-origin':'50% 50%'

$('.circle').css({'transform':'rotate(3000deg)','transition':'all 1s','transform-origin':'50% 50%'})

var height=$('.refresh').css('height') //得到带px后缀的字符串如86px

height=parseInt(height)

if(height>30){

//当下拉达到一定高度我才会刷新请求数据，操作函数写这里

}

var timer=setInterval(function(){ //慢速变矮，然后隐藏

height=height-5

$('.refresh').css('height',height);

if(height<=10){

clearInterval(timer);

$('.refresh').css({'display':'none'});

$('.circle').css({'transform':'rotate(0deg)'})

startY=0;

endY=0;

distance=0;

console.log('隐藏')

}

},10)

})

</script>

</body>

</html>

AILIHEIHEI

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js下拉刷新功能（jquery）。（完整demo）

这个完整的代码。触摸下拉可以刷新。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">...
复制链接

扫一扫