摘要：也可以采用其他的方式，如方式使用定時(shí)器的方式，的實(shí)現(xiàn)滑動(dòng)界面刷新的效果。

老樣子，我們先，哦不，今天我們直接上思路，沒有效果圖，真的沒有

我們依舊從界面及邏輯兩塊進(jìn)行分析

1.界面上，只分成簡單的兩塊，一塊是上方的刷新文字，一塊是下方的內(nèi)容，然后將上方提示內(nèi)容隱藏在屏幕之外，一般由兩種方式，一種是上面遮一層，另一種是marginTop:負(fù)值將其弄出屏幕外，這里我采用的是第一種，代碼也很簡單，就隨便貼一下

.header{????
    width:?100%;????
    height:?1rem;這里的高度應(yīng)該與刷新文字一樣高????
    position:?fixed;????
    z-index:?100;
}

2.功能實(shí)現(xiàn)的重頭戲是在邏輯上，主要分成下面幾個(gè)部分

監(jiān)聽事件

位置計(jì)算

控制界面變化

數(shù)據(jù)更新包

我一個(gè)一個(gè)進(jìn)行分析，然后帶你們?nèi)肟印?/p>

監(jiān)聽事件，這塊簡單，直接貼代碼

//el為下拉的整個(gè)節(jié)點(diǎn)//這里為添加監(jiān)聽
this.el.addEventListener("touchstart",?this.refreshTouchStart);
this.el.addEventListener("touchmove",?this.refreshTouchMove);
this.el.addEventListener("touchend",?this.refreshTouchEnd);//記住在不用的時(shí)候要移除監(jiān)聽哦
this.el.removeEventListener("touchstart",?this.refreshTouchStart);
this.el.removeEventListener("touchmove",?this.refreshTouchMovee);
this.el.removeEventListener("touchend",?this.refreshTouchEnd);//具體的函數(shù)，我們直接在位置計(jì)算中看

位置計(jì)算 我們分下拉刷新，上拉加載兩塊計(jì)算，分析可得

下拉刷新的邏輯 = 當(dāng)前頁面的首項(xiàng)在屏幕中且容器向下滑動(dòng)的距離大于一定值
上拉加載的邏輯 = 當(dāng)前頁面已滑動(dòng)到底部
好，我們直接看具體的實(shí)現(xiàn)邏輯代碼

//代碼中包含界面變化和數(shù)據(jù)更新，仔細(xì)看哦
refreshTouchStart(e)?{????
    let?touch?=?e.changedTouches[0];????
    this.tipText?=?"下拉刷新";//下拉提示文字????
    this.startY?=?touch.clientY;//獲得當(dāng)前按下點(diǎn)的縱坐標(biāo)
}

refreshTouchMove(e)?{????
    this.$store.commit("bottomShowFalse");//與本邏輯無關(guān)，滑動(dòng)時(shí)隱藏底部作用????
    let?touch?=?e.changedTouches[0];????
    let?_move?=?touch.clientY?-?this.startY;//獲得滑動(dòng)的距離????
    this.bottomFlag?=?$(".present-box").offset().top?+ $(".present-box").height()?-?document.body.clientHeight?<=?40;//滑動(dòng)到底部標(biāo)識(shí)????
    if?($(".present-box").offset().top?>=?this.headerHeight)?{//內(nèi)容主體超出了一個(gè)頭部的距離????????
        if?(_move?>?0?&&?_move?0代表下拉//<1000是為了防止神人無限拉阿拉????????????
            this.el.style.marginTop?=?_move?+?"px";//根據(jù)拉的距離，實(shí)現(xiàn)界面上的變化（界面變化）????????????
            this.moveDistance?=?touch.clientY?-?this.startY;//記錄滑動(dòng)的距離，在松手后讓他滑啊滑滑回去????????????
            if?(_move?>?50)?{//拉到一定程度再下拉刷新，防止誤操作????????????????
               this.tipText?=?"松開即可刷新"http://上面有了????????????
            }????????
        }
    }
}
refreshTouchEnd()?{????
    this.$store.commit("bottomShowTrue");//松開后底部就biu的出現(xiàn)啦????
    if?(this.bottomFlag)?{//若符合上拉加載的條件，則直接進(jìn)行數(shù)據(jù)更新????????
        this.$emit("loadBottom");????
    }????
    let?that?=?this;????
    if?(this.moveDistance?>?50)?{//拉了一定距離才觸發(fā)加載動(dòng)作????????
        this.tipText?=?"數(shù)據(jù)加載中...";????????
        let?timer?=?setInterval(function?()?{????????????
            that.el.style.marginTop?=?that.el.style.marginTop.split("px")[0]?-?5?+?"px";//如果拉的很長，一次性彈回去影響用戶體驗(yàn)，所以先讓他彈到50的高度，然后再進(jìn)行數(shù)據(jù)更新????????????
            if?(Number(that.el.style.marginTop.split("px")[0])?<=?50)?{//小于50后就不進(jìn)行界面變化了，先進(jìn)行數(shù)據(jù)更新再變化????????????????
                clearInterval(timer);????????????????
                new?Promise((resolve,?reject)?=>?{????????????????????
                that.$emit("loadTop",?resolve,?reject);//通知父控件，下拉刷新條件滿足了，你更新吧????????????????
                }).then(()?=>?{
                    that.resetBox();????????????????
                }).catch(()?=>?{
??????????????????  that.resetBox();//界面恢復(fù)（也就是彈回去啦）????????????????
                });???????????
            }???????
        },?1);//通過一個(gè)promise，讓數(shù)據(jù)更新結(jié)束后再進(jìn)行界面變化。也可以采用其他的方式，如async?await方式???
?    }?else?{
        this.resetBox();????
     }
}
resetBox()?{
????let?that?=?this;????//使用定時(shí)器的方式，biubiubiu的實(shí)現(xiàn)滑動(dòng)界面刷新的效果。????
    if?(this.moveDistance?>?0)?{
????????let?timer?=?setInterval(function?()?{
????????????that.el.style.marginTop?=?that.el.style.marginTop.split("px")[0]?-?1?+?"px";????????????
            if?(Number(that.el.style.marginTop.split("px")[0])?<=?0)?clearInterval(timer);//這里很重要，不刪除，可能看到奇奇怪怪的東西哦????????
        },?1)????
    }????
    this.moveDistance?=?0;????
}

這是我的github，歡迎大佬們猛戳，不定時(shí)更新