移动端下拉刷新原理和实例
生活随笔
收集整理的這篇文章主要介紹了
移动端下拉刷新原理和实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
移動端的下拉刷新是一個很常見的功能，也有許多開源庫實現了這個功能，不過為了學習，還是先自己寫一個例子學習一下。其中用到了一些touch事件和一些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,div,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，列表父容器的domlet 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。因為既然都是移動端了，這些東西基本上都支持了。
- 具體看代碼吧，注釋也有。本文只是講解原理，后續將會對其進行封裝成一個對象。方便直接調用。
總結
以上是生活随笔為你收集整理的移动端下拉刷新原理和实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： airflow的坑
- 下一篇： Yii 2.0高级版 下拉框预设值、默认