目錄

• 一、js 實現上拉加載
• 二、js 實現下拉刷新
• 三、注意事項

---

一、js 實現上拉加載

實現上拉加載的原理：監聽滾動條滑到頁面底部，然后就去做一次請求數據。

window.onscroll = function () {const scrollH = document.documentElement.scrollHeight；// 文檔的完整高度const scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 當前滾動條的垂直偏移const screenH = window.screen.height; // 屏幕可視高度if ((scrollH - scrollT - screenH) < 5) { // 5 只是一個相對值，可以讓頁面再接近底面的時候就開始請求// 執行請求} };

二、js 實現下拉刷新

實現下拉刷新原理：利用移動端的 touch 事件來實現。

touch事件主要為以下幾種：

• touchstart：觸摸開始（手指放在觸摸屏上）
• touchmove：拖動（手指在觸摸屏上移動）
• touchend：觸摸結束（手指從觸摸屏上移開）
• touchenter：移動的手指進入一個dom元素。
• touchleave：移動的手指離開一個dom元素。
• touchcancel：是在拖動中斷時候觸發。

下拉刷新的過程主要是用到了觸碰屏幕（touchstart），開始下拉（touchmove），松手（touchend）。

// 下拉刷新 this.outerScroller.addEventListener('touchstart',function (event) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置this.touchStart = touch.pageY;// event.preventDefault(); // 阻止瀏覽器默認下滑事件},false );this.outerScroller.addEventListener('touchmove',function (event) {var touch = event.targetTouches[0];this.scroll.style.top =this.scroll.offsetTop + touch.pageY - this.touchStart + 'px';this.touchStart = touch.pageY;this.touchDis = touch.pageY - this.touchStart;if (this.scroll.offsetTop > 0 && document.body.scrollTop < 50) {document.body.addEventListener('touchmove', this.preEvent, {passive: false}); // passive 參數不能省略，用來兼容ios和androidthis.emptyDiv.style.marginTop =Number(this.scroll.style.top.replace(/\s+|px/gi, '')) + 20 + 'px'; // 讓下拉的父級高度等于下滑部分+下滑距離，讓整體呈現下拉的感覺} else {return;}if (this.scroll.offsetTop >= 80) {// 限制下拉的距離this.scroll.style.top = '80px';}},false );this.outerScroller.addEventListener('touchend',function (event) {this.touchStart = 0;var top = this.scroll.offsetTop;var num = this.scroll.style.top.replace(/\s+|px/gi, ''); // 將top值轉成數值if (num < 0) {// 當上滑到頂部的時候，不超過邊界this.scroll.style.top = '0px';return;}if (top > 40) refresh();if (top > 0) {var time = setInterval(function () {this.scroll.style.top = this.scroll.offsetTop - 2 + 'px';this.emptyDiv.style.marginTop =Number(this.scroll.style.top.replace(/\s+|px/gi, '') + 20) +'px'; // 讓下拉的父級高度等于下滑部分+下滑距離，讓整體呈現下拉的感覺if (this.scroll.offsetTop <= 0) clearInterval(time);}, 1);}/* var time = setTimeout(function(){scroll.style.top = scroll.offsetTop -2+'px';emptyDiv.style.height = Number(360) + Number(scroll.style.top.replace(/\s+|px/gi,"")) + 'px'; // 讓下拉的父級高度等于下滑部分+下滑距離，讓整體呈現下拉的感覺if(scroll.offsetTop<=0)clearTimeout(time);time();},1)while(top>0){time();} */// event.stopPropagation();// window.event.returnValue = false;document.body.removeEventListener('touchmove', this.preEvent, {passive: false}); // passive 參數不能省略，用來兼容ios和android},false );function refresh () {console.log('下拉刷新'); }

三、注意事項

• 防抖的情況。
• 沒有數據的情況。

【參考】
https://www.cnblogs.com/xinsir/articles/10475055.html
https://www.cnblogs.com/xinsir/p/10314694.html

總結

以上是生活随笔為你收集整理的js 实现上拉加载和下拉刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。