前端面試題 上拉載入，下拉重新整理 vue怎麼實現
前言
下拉重新整理和上拉載入這兩種互動方式通常出現在移動端中
本質上等同於PC網頁中的分頁，只是互動形式不同
開源社群也有很多優秀的解決方案，如
iscroll
、
better-scroll
、
pulltorefresh。js
庫等等
這些第三方庫使用起來非常便捷
我們透過原生的方式實現一次上拉載入，下拉重新整理，有助於對第三方庫有更好的理解與使用
實現原理
上拉載入及下拉重新整理都依賴於使用者互動
最重要的是要理解在什麼場景，什麼時機下觸發互動動作
上拉載入
首先可以看一張圖
上拉載入的本質是頁面觸底，或者快要觸底時的動作
判斷頁面觸底我們需要先了解一下下面幾個屬性
scrollTop
：滾動視窗的高度距離
window
頂部的距離，它會隨著往上滾動而不斷增加，初始值是0，它是一個變化的值
clientHeight
：它是一個定值，表示螢幕可視區域的高度；
scrollHeight
：頁面不能滾動時也是存在的，此時scrollHeight等於clientHeight。scrollHeight表示
body
所有元素的總長度（包括body元素自身的padding）
offsetTop 元素的上外邊框至包含元素的上內邊框之間的畫素距離，其他方向相同
offsetWidth 元素兩端算上外邊框的寬度，其他方向相同
scrollLeft 和 scrollTop 既可以確定當前元素的滾動狀態，也可以設定元素的滾動位置
scrollWidth 和 scrollHeight 確定元素內容的實際大小
clientWidth 元素內容區寬度加上左右內邊距寬度，即clientWidth = content + padding
clientHeight 元素內容區高度加上上下內邊距高度，即clientHeight = content + padding
綜上我們得出一個觸底公式：
scrollTop + clientHeight >= scrollHeight
簡單實現
let clientHeight = document。documentElement。clientHeight； //瀏覽器高度let scrollHeight = document。body。scrollHeight；let scrollTop = document。documentElement。scrollTop； let distance = 50； //距離視窗還用50的時候，開始觸發；if （（scrollTop + clientHeight） >= （scrollHeight - distance）） { console。log（“開始載入資料”）；}
下拉重新整理
下拉重新整理的本質是頁面本身置於頂部時，使用者下拉時需要觸發的動作
關於下拉重新整理的原生實現，主要分成三步：
監聽原生
touchstart
事件，記錄其初始位置的值，
e。touches［0］。pageY
；
監聽原生
touchmove
事件，記錄並計算當前滑動的位置值與初始位置值的差值，大於
0
表示向下拉動，並藉助CSS3的
translateY
屬性使元素跟隨手勢向下滑動對應的差值，同時也應設定一個允許滑動的最大值；
監聽原生
touchend
事件，若此時元素滑動達到最大值，則觸發
callback
，同時將
translateY
重設為
0
，元素回到初始位置
舉個例子：
Html
結構如下：
監聽
touchstart
事件，記錄初始的值
var _element = document。getElementById（‘refreshContainer’）， _refreshText = document。querySelector（‘。refreshText’）， _startPos = 0， // 初始的值 _transitionHeight = 0； // 移動的距離_element。addEventListener（‘touchstart’， function（e） { _startPos = e。touches［0］。pageY； // 記錄初始位置 _element。style。position = ‘relative’； _element。style。transition = ‘transform 0s’；}， false）；
監聽
touchmove
移動事件，記錄滑動差值
_element。addEventListener（‘touchmove’， function（e） { // e。touches［0］。pageY 當前位置 _transitionHeight = e。touches［0］。pageY - _startPos； // 記錄差值 if （_transitionHeight > 0 && _transitionHeight < 60） { _refreshText。innerText = ‘下拉重新整理’； _element。style。transform = ‘translateY（’+_transitionHeight+‘px）’； if （_transitionHeight > 55） { _refreshText。innerText = ‘釋放更新’； } } }， false）；
最後，就是監聽
touchend
離開的事件
_element。addEventListener（‘touchend’， function（e） { _element。style。transition = ‘transform 0。5s ease 1s’； _element。style。transform = ‘translateY（0px）’； _refreshText。innerText = ‘更新中。。。’； // todo。。。}， false）；
從上面可以看到，在下拉到鬆手的過程中，經歷了三個階段：
當前手勢滑動位置與初始位置差值大於零時，提示正在進行下拉重新整理操作
下拉到一定值時，顯示鬆手釋放後的操作提示
下拉到達設定最大值鬆手時，執行回撥，提示正在進行更新操作
案例
在實際開發中，我們更多的是使用第三方庫，下面以
better-scroll
進行舉例：
HTML結構
下拉重新整理
檢視更多
例項化上拉下拉外掛，透過
use
來註冊外掛
import BScroll from “@better-scroll/core”；import PullDown from “@better-scroll/pull-down”；import PullUp from ‘@better-scroll/pull-up’；BScroll。use（PullDown）；BScroll。use（PullUp）；
例項化
BetterScroll
，並傳入相關的引數
let pageNo = 1，pageSize = 10，dataList = ［］，isMore = true； var scroll= new BScroll（“#position-wrapper”，{ scrollY：true，//垂直方向滾動 click：true，//預設會阻止瀏覽器的原生click事件，如果需要點選，這裡要設為true pullUpLoad：true，//上拉載入更多 pullDownRefresh：{ threshold：50，//觸發pullingDown事件的位置 stop：0//下拉回彈後停留的位置 }}）；//監聽下拉重新整理scroll。on（“pullingDown”，pullingDownHandler）；//監測實時滾動scroll。on（“scroll”，scrollHandler）；//上拉載入更多scroll。on（“pullingUp”，pullingUpHandler）；async function pullingDownHandler（）{ dataList=［］； pageNo=1； isMore=true； $（“。more”）。text（“檢視更多”）； await getlist（）；//請求資料 scroll。finishPullDown（）；//每次下拉結束後，需要執行這個操作 scroll。refresh（）；//當滾動區域的dom結構有變化時，需要執行這個操作}async function pullingUpHandler（）{ if（！isMore）{ $（“。more”）。text（“沒有更多資料了”）； scroll。finishPullUp（）；//每次上拉結束後，需要執行這個操作 return； } pageNo++； await this。getlist（）；//請求資料 scroll。finishPullUp（）；//每次上拉結束後，需要執行這個操作 scroll。refresh（）；//當滾動區域的dom結構有變化時，需要執行這個操作 }function scrollHandler（）{ if（this。y>50） $（‘。refresh’）。text（“鬆手開始載入”）； else $（‘。refresh’）。text（“下拉重新整理”）；}function getlist（）{ //返回的資料 let result=。。。。； dataList=dataList。concat（result）； //判斷是否已載入完 if（result。length 注意點： 使用 better-scroll 實現下拉重新整理、上拉載入時要注意以下幾點： wrapper 裡必須只有一個子元素 子元素的高度要比 wrapper 要高 使用的時候，要確定 DOM 元素是否已經生成，必須要等到 DOM 渲染完成後，再 new BScroll（） 滾動區域的 DOM 元素結構有變化後，需要執行重新整理 refresh（） 上拉或者下拉，結束後，需要執行 finishPullUp（） 或者 finishPullDown（） ，否則將不會執行下次操作 better-scroll ，預設會阻止瀏覽器的原生 click 事件，如果滾動內容區要新增點選事件，需要在例項化屬性裡設定 click：true Vue 實現 下拉重新整理載入 ！<！—— 使用vant元件來寫下來重新整理載入 ——> 上拉重新整理下拉載入 ！ 小結 下拉重新整理、上拉載入原理本身都很簡單，真正複雜的是封裝過程中，要考慮的相容性、易用性、效能等諸多細節 給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。 前端學習交流、自學、學習資料等推薦 - 知乎
