本篇文章給大家?guī)砹岁P于vue2的相關知識，其中主要跟大家聊一聊帶有阻尼下拉加載的功能是怎么在vue2中實現(xiàn)的，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。
在vue中，需要綁定觸發(fā)的事件
<div id="testchatBox" class="chatWrap" :style="{paddingTop: chatScroollTop + "px"}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></div>代碼片段使用到了三個回調函數(shù)：
(資料圖片)
touchstart: 手指觸摸到屏幕的那一刻的時候
touchmove: 手指在屏幕上移動的時候
touchend: 手指離開屏幕的時候
從paddingTop可以看出，我們是通過控制這個容器距離的頂部的padding來實現(xiàn)下拉的效果。所以說我們的重調就是通過上面的三個回調函數(shù)來確定chatScroollTop的值。
通過chatScroollTop 這個命名就可以知道，我們這個下拉刷新是用在聊天框容器當中.
我們需要使用這些變量：
data() { return { chatScroollTop: 0, // 容器距離頂部的距離 isMove: false, // 是否處于touchmove狀態(tài) startY: 0, // 當前手指在屏幕中的y軸值 pageScrollTop: 0, // 滾動條當前的縱坐標 }}三個回調函數(shù)對應三個階段，而我們核心代碼也分為三個部分：
第一部分：初始化當前容器的到頂部的距離,以及初始化當前是否處于滑動的狀態(tài),并獲取當前滾動條的縱坐標。
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}第二部分：根據(jù)當前手指當前距離觸摸屏幕時刻的縱坐標差來確定容器和頂部的距離。但是由于不能一直的滑動，所以給了一個0 -> 80的氛圍。為了讓滑動更加的有趣，添加了一個step步進值來調整滑動的距離比例，所謂的距離比例就是手指距離一開始的距離越遠，那么容量跟著滑動的距離就越短。實現(xiàn)一個類似阻尼的效果。
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 } }推薦學習：《vue.js視頻教程》
以上就是一文詳解vue2如何實現(xiàn)帶有阻尼下拉加載功能的詳細內容，更多請關注php中文網其它相關文章！
關鍵詞： Vue2
營業(yè)執(zhí)照公示信息