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

成都創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為南安企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站，南安網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

代碼片段使用到了三個(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 && 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
    }
  }

以上就是關(guān)于“vue2怎么實(shí)現(xiàn)帶有阻尼下拉加載功能”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。