原生js手機端觸摸下拉刷新
阿新 • • 發佈：2017-09-28
inter viewport 需要 device all val hid abs port
廢話不多說，直接上代碼，這裏感謝我的好朋友，豆姐
<!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手機端觸摸下拉刷新