ホームページ > 記事 > ウェブフロントエンド > HTML5でモバイル端末にプルダウン更新を実装(原理とコード)
この記事では、HTML5 のモバイル プルダウン リフレッシュの実装 (原理とコード) を紹介します。必要な方は参考にしていただければ幸いです。
モバイル側のプルダウン更新は非常に一般的な機能であり、この機能を実装するオープンソース ライブラリは数多くあります。ただし、学習するには、自分でサンプルを書いて学習することをお勧めします。一部のタッチ イベントと一部の DOM プロパティ CSS3 プロパティが使用されます。コードに直接アクセスします。コードにはコメントがあります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <style type="text/css"> html, body, header, p, main, p, span, ul, li { margin: 0; padding: 0; } #refreshContainer li { background-color: #eee; margin-bottom: 1px; padding: 20px 10px; } .refreshText { position: absolute; width: 100%; line-height: 50px; text-align: center; left: 0; top: 0; transform: translateY(-50px); } </style> </head> <body> <main class="parent"> <p class="refreshText"></p> <ul id="refreshContainer"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> </main> <script type="text/javascript"> window.onload = function(){ //1.获取到列表的dom,刷新显示部分的dom,列表父容器的dom let container = document.querySelector('#refreshContainer'); let refreshText = document.querySelector('.refreshText'); let parent = document.querySelector('.parent'); //2.定义一些需要常用的变量 let startY = 0;//手指触摸最开始的Y坐标 let endY = 0;//手指结束触摸时的Y坐标 //3.给列表dom监听touchstart事件,得到起始位置的Y坐标 parent.addEventListener('touchstart',function(e){ startY = e.touches[0].pageY; }); //4.给列表dom监听touchmove事件,当移动到一定程度需要显示上面的文字 parent.addEventListener('touchmove',function (e) { if(isTop() && (e.touches[0].pageY-startY) > 0){ console.log('下拉了'); refreshText.style.height = "50px"; parent.style.transform = "translateY(50px)"; parent.style.transition = "all ease 0.5s"; refreshText.innerHTML = "释放立即刷新..."; } }); //5.给列表dom监听touchend事件,此时说明用户已经松开了手指,应该进行异步操作了 parent.addEventListener('touchend',function (e) { if(isTop()){ refreshText.innerHTML = "正在刷新..."; setTimeout(function(){ parent.style.transform = "translateY(0)"; console.log('成功刷新'); },2000) } return; }) function isTop(){ var t = document.documentElement.scrollTop||document.body.scrollTop; return t === 0 ? true : false; } } </script> </body> </html>
CSS3のtransformとanimateを使用しています。というのは、すべてモバイルなので、これらのことは基本的にサポートされています。
詳しくはコードをご覧ください。コメントもあります。この記事では原理のみを説明します。後でオブジェクトにカプセル化します。直接電話できるので便利です。
おすすめ関連記事:
vue.jsモバイル端末にプルアップロードとプルダウンリフレッシュを実装
モバイル端末のプルダウンリフレッシュ、iScroll.jsの使い方(再掲)_html/css_WEB-鼻
以上がHTML5でモバイル端末にプルダウン更新を実装(原理とコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。