前段時間在做小程序到H5的遷移峡钓，其中小程序中下拉刷新的功能引起了產品的注意妓笙。他說到，哎能岩，我們遷移后的H5頁面怎么沒有下拉刷新寞宫，于是乎，我就急忙將這部分的內容給填上拉鹃。
本來是計劃使用成熟的組件庫來實現辈赋，嘗試之后發(fā)現這些組件和我們H5頁面的其他邏輯有沖突（H5還有吸頂、錨點膏燕、滑動高亮钥屈、橫向滾動），小小H5頁面上承載了太多的功能坝辫，兼容起來非常麻煩篷就，想著下拉刷新功能也不復雜，干脆我自己寫一個好了近忙。
流程圖示
正常數據展示狀態(tài) --> 手指觸摸屏幕下拉 --> 手指松開 --> 數據獲取 --> 恢復正常數據展示狀態(tài)
功能梳理
要實現這個功能竭业，主要分為兩部分。
監(jiān)聽手指觸摸事件
通過監(jiān)聽事件及舍，我們可以得知以下的數據
- 手指滑動的時機（手指開始觸摸未辆，結束觸摸時間）
- 滑動方向（是橫向滑動還是縱向滑動）
- 操作軌跡（手指操作從下往上還是從上往下滑動）
- 是否首屏（如果非首屏進行滑動時是正常滑動操作）
只有在向下滑動锯玛、首屏鼎姐、非加載狀態(tài)、縱向滾動并且有高度時更振，才能進行上述刷新流程。
css 和 提示文案
- 手指按住屏幕由上往下滑動未松開時饭尝，展示滑動的高度和提示【釋放刷新】文案
- 手指松開后高度回彈肯腕，顯示【數據更新中】文案
- 數據請求接口成功后，顯示【更新成功】文案钥平，loading 內容和圖標緩緩消失
具體實現
觸摸的步驟可以分為： 手指按下（開始觸摸）实撒、手指移動不離開屏幕（觸摸中）姊途、手指離開屏幕（觸摸結束），正好對應著三個 js 原生事件知态，touchstart捷兰、touchmove 和 touchend。
觸摸事件執(zhí)行時機
touchstart 和 touchmove 在一次觸摸流程只會執(zhí)行一次负敏，標志著開始和結束贡茅，但是 touchmove 不一樣，只要你的手指還在屏幕上滑動沒有松開其做，就會一直執(zhí)行顶考。如下圖的輸出的執(zhí)行次數一樣。
下拉元素綁定
首先需要給需要設置下拉刷新的區(qū)域綁定上這些事件妖泄，對于我們業(yè)務場景來說驹沿，頭部區(qū)域無論你如何操作，都需要保留展示的蹈胡，那么我們只需要將事件綁定到下方開始顯示下拉刷新的區(qū)域渊季。
// html元素
<div className="refreshWrap">
{/* 下拉時文字提示 */}
<div className={`pullDownContent`} style={{ height: pullDownHeight }}>
{loading ? "" : "釋放刷新"}
</div>
{/* 加載時動畫 */}
<div className={`loadingFlex ${loading ? "" : "loadingHidden"}`}>
<div className="flexCenter">
<div className="loadingRing" />
<div className="loadingText">
{loading ? "數據更新中..." : "更新成功"}
</div>
</div>
</div>
<div className="middleArea">刷新區(qū)域下方內容區(qū)域</div>
</div>
// js 綁定
const pullDownClassName = ".refreshWrap";
bindPullDown() {
const pulldownElement = document.querySelector(pullDownClassName);
pulldownElement.addEventListener("touchstart", this.bindTouchstart);
pulldownElement.addEventListener("touchmove", this.bindTouchMove);
pulldownElement.addEventListener("touchend", this.bindTouched);
}
觸摸開始
手指觸摸到屏幕的邏輯非常簡單，使用 startTouch 對象來記錄觸摸的位置罚渐，包含 x 却汉、y 軸。
bindTouchstart = (event) => {
this.startTouch = event.touches[0];
};
觸摸中
用戶觸摸中需要給他一個反饋搅轿，隨著下拉的距離病涨，屏幕上圈出的下拉區(qū)域會隨之變大（下拉展示的區(qū)域會設置一個最大高度，如果能無限擴大展示不好看）
用 endTouch 來保存觸摸中的坐標值璧坟，因為觸摸中的事件會執(zhí)行多次既穆，所以 endTouch 也會不斷的更新，用來更新下拉時滑動的高度雀鹃。
bindTouchMove = (event) => {
const { loading } = this.state;
this.endTouch = event.touches[0];
if (!loading && this.isInOneScreenPull() && this.isVerticalSliding()) {
const pullDownHeight = this.getPullDownHeight();
this.setState({
pullDownHeight,
});
}
};
根據 endTouch 的值可以判斷出滑動距離幻工、橫向還是縱向滑動，滑動的高度黎茎、再獲取滑動元素是否在首屏囊颅。
// 判斷滑動的距離
calcDeltaY = () => Math.abs(this.endTouch.pageY - this.startTouch.pageY);
// 判斷是否縱向滾動
isVerticalSliding = () => {
const deltaY = this.calcDeltaY();
const deltaX = Math.abs(this.endTouch.pageX - this.startTouch.pageX);
if (deltaY > deltaX && deltaY > 50) return true;
};
// 下拉展示高度最多展示為100，不能讓加載區(qū)域無限制的擴大
getPullDownHeight = () => {
const deltaY = this.calcDeltaY();
return Math.min(deltaY, 100);
};
// 是否在首屏
isInOneScreenPull() {
const pulldownElement = document.querySelector(pullDownClassName);
return pulldownElement.scrollTop <= 0;
}
觸摸結束
觸摸結束時傅瞻，將 pulldownHeight 設置為0踢代，異步加載數據，加載數據時設置變量 loading 表示開始更新嗅骄、結束更新胳挎，防止不停的下拉刷新調用接口。
bindTouched = (e) => {
const { loading, pullDownHeight } = this.state;
// 首屏溺森、非加載狀態(tài)慕爬、縱向滾動有高度時
if (!loading && pullDownHeight) {
this.setState({
pullDownHeight: 0,
});
this.getData();
// 重置觸摸Y軸坐標點
this.startTouch = {};
this.endTouch = {};
}
};
平滑過渡動畫
當下拉高度發(fā)生變化時窑眯，直接修改高度效果會比較生硬，使用 css transition 屬性進行平滑過渡医窿、animation 設置動畫緩慢進入/消失磅甩。
.pullDownContent {
display: flex;
align-items: flex-end;
justify-content: center;
font-size: 12px;
color: rgba(0, 0, 0, 0.25);
margin: auto;
transition: height 0.3s ease-out; /* 平滑過渡效果 */
overflow: hidden;
}
.loadingHidden {
animation: shrinkHeight 1s forwards;
}
@keyframes shrinkHeight {
100% {
height: 0;
opacity: 0;
overflow: hidden;
}
}
完整代碼
以上便是滑動觸發(fā)、高度提示姥卢、數據刷新的下拉刷新功能解析卷要，完整代碼我放在了 github 上，戳 drop-down-refresh 可查看隔显，歡迎大家點個 star~
