本篇文章給大家?guī)砹岁P(guān)于vue2的相關(guān)知識，其中主要跟大家聊一聊帶有阻尼下拉加載的功能是怎么在vue2中實現(xiàn)的，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。
在vue中，需要綁定觸發(fā)的事件
<div
id="testchatBox"
class="chatWrap"
:style="{paddingTop: chatScroollTop + 'px'}"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd">
</div>代碼片段使用到了三個回調(diào)函數(shù)：
touchstart: 手指觸摸到屏幕的那一刻的時候
touchmove: 手指在屏幕上移動的時候
touchend: 手指離開屏幕的時候
從paddingTop可以看出，我們是通過控制這個容器距離的頂部的padding來實現(xiàn)下拉的效果。所以說我們的重調(diào)就是通過上面的三個回調(diào)函數(shù)來確定chatScroollTop的值。
通過chatScroollTop 這個命名就可以知道，我們這個下拉刷新是用在聊天框容器當(dāng)中.
我們需要使用這些變量：
data() {
return {
chatScroollTop: 0, // 容器距離頂部的距離
isMove: false, // 是否處于touchmove狀態(tài)
startY: 0, // 當(dāng)前手指在屏幕中的y軸值
pageScrollTop: 0, // 滾動條當(dāng)前的縱坐標
}
}三個回調(diào)函數(shù)對應(yīng)三個階段，而我們核心代碼也分為三個部分：
第一部分：初始化當(dāng)前容器的到頂部的距離,以及初始化當(dāng)前是否處于滑動的狀態(tài),并獲取當(dāng)前滾動條的縱坐標。
touchStart(e) {
// e代表該事件對象，e.targetTouches[0].pageY可以拿到手指按下的 y軸點
this.startY = e.targetTouches[0].pageY
// 開啟下拉刷新狀態(tài)
this.isMove = false
this.pageScrollTop = document.documentElement && document.documentElement.scrollTop
}第二部分：根據(jù)當(dāng)前手指當(dāng)前距離觸摸屏幕時刻的縱坐標差來確定容器和頂部的距離。但是由于不能一直的滑動，所以給了一個0 -> 80的氛圍。為了讓滑動更加的有趣，添加了一個step步進值來調(diào)整滑動的距離比例，所謂的距離比例就是手指距離一開始的距離越遠，那么容量跟著滑動的距離就越短。實現(xiàn)一個類似阻尼的效果。
touchMove(e) {
// 這個 touchMove，只要頁面在動都會發(fā)生的，所以 touching就起作用了
// 獲取移動的距離
let diff = e.targetTouches[0].pageY - this.startY
let step = 60
if (diff > 0 && diff < 80 && this.pageScrollTop === 0) {
step++ // 越來越大
this.chatScroollTop += (diff / (step * 0.1)) // 越向下給人的阻力感越大
this.isMove = true
}
}第三部分：手指松開之后，給一個距離頂部的距離是為了添加加載滾動條。
touchEnd() {
if(this.isMove) {
this.chatScroollTop = 40
this.downCallback() // api拉取數(shù)據(jù)
}
}
async downCallback() {
try {
// 拿數(shù)據(jù)
} catch() {}
finall{
this.chatScrollTop = 0
}
}
