本篇文章給大家?guī)?lái)了關(guān)于vue2的相關(guān)知識(shí)，其中主要跟大家聊一聊帶有阻尼下拉加載的功能是怎么在vue2中實(shí)現(xiàn)的，感興趣的朋友下面一起來(lái)看一下吧，希望對(duì)大家有幫助。
在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: 手指離開(kāi)屏幕的時(shí)候
從paddingTop可以看出，我們是通過(guò)控制這個(gè)容器距離的頂部的padding來(lái)實(shí)現(xiàn)下拉的效果。所以說(shuō)我們的重調(diào)就是通過(guò)上面的三個(gè)回調(diào)函數(shù)來(lái)確定chatScroollTop的值。
通過(guò)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 // 開(kāi)啟下拉刷新?tīng)顟B(tài) this.isMove = false this.pageScrollTop = document.documentElement && document.documentElement.scrollTop}第二部分：根據(jù)當(dāng)前手指當(dāng)前距離觸摸屏幕時(shí)刻的縱坐標(biāo)差來(lái)確定容器和頂部的距離。但是由于不能一直的滑動(dòng)，所以給了一個(gè)0 -> 80的氛圍。為了讓滑動(dòng)更加的有趣，添加了一個(gè)step步進(jìn)值來(lái)調(diào)整滑動(dòng)的距離比例，所謂的距離比例就是手指距離一開(kāi)始的距離越遠(yuǎn)，那么容量跟著滑動(dòng)的距離就越短。實(shí)現(xiàn)一個(gè)類(lèi)似阻尼的效果。
touchMove(e) { // 這個(gè) touchMove，只要頁(yè)面在動(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++ // 越來(lái)越大 this.chatScroollTop += (diff / (step * 0.1)) // 越向下給人的阻力感越大 this.isMove = true }}第三部分：手指松開(kāi)之后，給一個(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 } }推薦學(xué)習(xí)：《vue.js視頻教程》
以上就是一文詳解vue2如何實(shí)現(xiàn)帶有阻尼下拉加載功能的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞： Vue2
營(yíng)業(yè)執(zhí)照公示信息