vue2怎么實現帶有阻尼下拉加載功能

這篇“vue2怎么實現帶有阻尼下拉加載功能”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue2怎么實現帶有阻尼下拉加載功能”文章吧。

在vue中，需要綁定觸發的事件

<div
  id="testchatBox"
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + 'px'}"
  @touchstart="touchStart" 
  @touchmove="touchMove"
  @touchend="touchEnd">
</div>

代碼片段使用到了三個回調函數：

• touchstart: 手指觸摸到屏幕的那一刻的時候

• touchmove: 手指在屏幕上移動的時候

• touchend: 手指離開屏幕的時候

從paddingTop可以看出，我們是通過控制這個容器距離的頂部的padding來實現下拉的效果。所以說我們的重調就是通過上面的三個回調函數來確定chatScroollTop的值。

通過chatScroollTop 這個命名就可以知道，我們這個下拉刷新是用在聊天框容器當中.

我們需要使用這些變量：

data() {
  return {
    chatScroollTop: 0, // 容器距離頂部的距離 
    isMove: false, // 是否處于touchmove狀態
    startY: 0, // 當前手指在屏幕中的y軸值
    pageScrollTop: 0, // 滾動條當前的縱坐標
    
  }
}

三個回調函數對應三個階段，而我們核心代碼也分為三個部分：

第一部分：初始化當前容器的到頂部的距離,以及初始化當前是否處于滑動的狀態,并獲取當前滾動條的縱坐標。

touchStart(e) {
  // e代表該事件對象，e.targetTouches[0].pageY可以拿到手指按下的 y軸點
  this.startY = e.targetTouches[0].pageY
  // 開啟下拉刷新狀態
  this.isMove = false
  this.pageScrollTop = document.documentElement && document.documentElement.scrollTop
}

第二部分：根據當前手指當前距離觸摸屏幕時刻的縱坐標差來確定容器和頂部的距離。但是由于不能一直的滑動，所以給了一個0 -> 80的氛圍。為了讓滑動更加的有趣，添加了一個step步進值來調整滑動的距離比例，所謂的距離比例就是手指距離一開始的距離越遠，那么容量跟著滑動的距離就越短。實現一個類似阻尼的效果。

touchMove(e) {
  // 這個 touchMove，只要頁面在動都會發生的，所以 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拉取數據
    }
  }
  async downCallback() {
    try {
       // 拿數據 
    } catch() {} 
    finall{
      this.chatScrollTop = 0
    }
  }

以上就是關于“vue2怎么實現帶有阻尼下拉加載功能”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。