原生js手机端触摸下拉刷新
Posted 一梦_浮生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js手机端触摸下拉刷新相关的知识，希望对你有一定的参考价值。
废话不多说，直接上代码，这里感谢我的好朋友，豆姐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> <title>下拉刷新</title> </head> <style> div{ width:100%; overflow:hidden; } div ul{ margin:0; position:absolute; top:-40px; left:0; width:100%; padding:0; } div ul li{ list-style-type:none; text-align:center; border-bottom:1px solid #999; line-height:40px; margin:0; } .div{ height:1000px; width:100%; background:#F00; margin-top:500px; } </style> <body> <!--滑动绑定元素 cont需要定位--> <div class="all"> <ul class="cont"> <li><img src="../refresh/slide-up-down/slide-up-down/2787117_161300358107_1.gif" height="20"></li> <li><span id="test">下拉刷新</span></li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <!--滑动绑定元素结束--> <div class="div"></div><!--页面元素--> <script> var _sroll = document.querySelector(‘.all‘); var outscroll = document.querySelector(‘.cont‘); var _test = document.querySelector(‘#test‘); var _star = 0; //获取手指最初的位置,添加一个触摸开始的监听事件 _sroll.addEventListener(‘touchstart‘,function(event){ //获取手指数组中的第一个（可以用targetTouches） var _touch = event.touches[0]; //获取滑动时手指的y坐标+ _star = _touch.pageY; }, false); //获取滑动的距离，添加一个触摸滑动的监听事件 _sroll.addEventListener(‘touchmove‘,function(event){ //获取手指数组中的第一个（可以用targetTouches） var _touch = event.touches[0]; outscroll.style.top = outscroll.offsetTop + _touch.pageY-_star + ‘px‘; //获取滑动后手指的y坐标 _star = _touch.pageY; _test.innerHTML = ‘放开刷新‘; }, false); //添加屏幕触摸接触结束的事件 _sroll.addEventListener(‘touchend‘,function(event){ //初始化手指触摸的y坐标 _star = 0; //获取下拉元素的top值 var top = outscroll.offsetTop; //如果大于40就刷新 if(top>0){ //循环慢慢的收缩 var time = setInterval(function(){ outscroll.style.top = outscroll.offsetTop -2+‘px‘; //如果top等于原始值，停止收缩 if(outscroll.offsetTop<=-40){ clearInterval(time); //刷新页面 location.reload(); } },1); } }, false); </script> </body> </html>
以上是关于原生js手机端触摸下拉刷新的主要内容，如果未能解决你的问题，请参考以下文章