快捷導(dǎo)航

vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能

更新時(shí)間：2023年02月16日 10:34:15 作者：砂糖橘加鹽

這篇文章主要為大家介紹了vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

在vue中需要綁定觸發(fā)的事件

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

代碼片段使用到了三個(gè)回調(diào)函數(shù)：

touchstart: 手指觸摸到屏幕的那一刻的時(shí)候
touchmove: 手指在屏幕上移動(dòng)的時(shí)候
touchend: 手指離開屏幕的時(shí)候

從paddingTop可以看出，我們是通過控制這個(gè)容器距離的頂部的padding來實(shí)現(xiàn)下拉的效果。所以說我們的重調(diào)就是通過上面的三個(gè)回調(diào)函數(shù)來確定chatScroollTop的值。

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

需要使用的變量

我們需要使用這些變量：

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

三個(gè)回調(diào)函數(shù)對(duì)應(yīng)三個(gè)階段，而我們核心代碼也分為三個(gè)部分：

第一部分：初始化當(dāng)前容器的到頂部的距離,以及初始化當(dāng)前是否處于滑動(dòng)的狀態(tài),并獲取當(dāng)前滾動(dòng)條的縱坐標(biāo)。

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

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

touchMove(e) {
  // 這個(gè) touchMove，只要頁面在動(dòng)都會(huì)發(fā)生的，所以 touching就起作用了
  // 獲取移動(dòng)的距離
  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
  }
}

第三部分：手指松開之后，給一個(gè)距離頂部的距離是為了添加加載滾動(dòng)條。

  touchEnd() {
    if(this.isMove) {
      this.chatScroollTop = 40
      this.downCallback() // api拉取數(shù)據(jù)
    }
  }
  async downCallback() {
    try {
       // 拿數(shù)據(jù) 
    } catch() {} 
    finall{
      this.chatScrollTop = 0
    }
  }

以上就是vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能的詳細(xì)內(nèi)容，更多關(guān)于vue2阻尼下拉加載的功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: