搜尋
首頁web前端Vue.js一文詳解vue2如何實現帶有阻尼下拉加載功能

這篇文章為大家帶來了關於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中文網其他相關文章!

陳述
本文轉載於:juejin。如有侵權,請聯絡admin@php.cn刪除
Vue中export default如何配置組件的lifecycle hooksVue中export default如何配置組件的lifecycle hooksMar 04, 2025 pm 03:29 PM

本文闡明了導出默認值在vue.js組件中的作用,強調它僅用於導出,而不是配置生命週期掛鉤。 生命週鉤被定義為組件選項對像中的方法,其功能un

Vue中export default如何配置組件的watchVue中export default如何配置組件的watchMar 04, 2025 pm 03:30 PM

本文使用導出默認值時闡明vue.js組件手錶功能。 它通過特定於物業的觀看,明智的深層和直接的期權使用以及優化的處理程序功能來強調有效的手錶用法。 最佳實踐

什麼是vuex,如何將其用於VUE應用程序中的狀態管理?什麼是vuex,如何將其用於VUE應用程序中的狀態管理?Mar 11, 2025 pm 07:23 PM

本文解釋了VUE.J.的州管理庫Vuex。 它詳細介紹了核心概念(狀態,獲取器,突變,動作)並展示用法,並強調了其比更簡單的替代方案對大型項目的好處。 調試和結構

如何在vue.js中創建和使用自定義插件?如何在vue.js中創建和使用自定義插件?Mar 14, 2025 pm 07:07 PM

文章討論創建和使用自定義vue.js插件,包括開發,集成和維護最佳實踐。

如何使用VUE路由器(動態路由,嵌套路線,路線護罩)實現高級路由技術?如何使用VUE路由器(動態路由,嵌套路線,路線護罩)實現高級路由技術?Mar 11, 2025 pm 07:22 PM

本文探討了高級VUE路由器技術。 它涵蓋動態路由(使用參數),用於層次導航的嵌套路由以及用於控制訪問和數據獲取的路線護罩。 管理複雜路線的最佳實踐

vue.js(基於組件的架構,虛擬DOM,反應數據綁定)的關鍵功能是什麼?vue.js(基於組件的架構,虛擬DOM,反應數據綁定)的關鍵功能是什麼?Mar 14, 2025 pm 07:05 PM

Vue.js憑藉其基於組件的體系結構,用於性能的虛擬DOM以及用於實時UI更新的反應性數據綁定來增強Web開發。

如何配置Vue CLI以使用不同的構建目標(開發,生產)?如何配置Vue CLI以使用不同的構建目標(開發,生產)?Mar 18, 2025 pm 12:34 PM

本文介紹瞭如何為不同的構建目標,切換環境,優化生產構建以及確保在調試中開發的源圖。

如何將VUE與Docker一起用於容器化部署?如何將VUE與Docker一起用於容器化部署?Mar 14, 2025 pm 07:00 PM

本文討論了與Docker使用VUE進行部署,重點介紹了容器中VUE應用程序的設置,優化,管理和性能監視。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境