一文詳解vue2如何實現帶有阻尼下拉加載功能

這篇文章為大家帶來了關於vue2的相關知識，其中主要跟大家聊一聊帶有阻尼下拉加載的功能是怎麼在vue2中實現的，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

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

<div
  id="testchatBox"
  class="chatWrap"
  :style="{paddingTop: chatScroollTop + &#39;px&#39;}"
  @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
    }
  }

推薦學習：《vue.js影片教學》

#

以上是一文詳解vue2如何實現帶有阻尼下拉加載功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！