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

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

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
}

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
    }
  }