今天項目需求需要實現(xiàn)一個類似于微信右滑顯示額外選項的功能，記錄一下實現(xiàn)思路。

一.搭建簡易的頁面

對應(yīng)的代碼，界面使用了tailwindCSS，代碼非常簡單，就是普通的定位，關(guān)鍵的定位已經(jīng)用黃色框框圈出。right的值為div刪除的寬度，其它的樣式這里不再過多贅述。

二.前置條件

這里先來梳理一下思路。

首先，我們需要給這刪除按鈕組件打上ref，因為之后我們需要用到這個div的實例。(wrapper的ref是只是為了優(yōu)化代碼，我們暫時不需要)這里我們需要用到TouchEvent這個事件，我們在瀏覽器開發(fā)者工具測試時，需要調(diào)節(jié)自適應(yīng)到手機的模式才可以看到效果。

我們把@touchstart和@touchend這兩個原生事件綁定到和朋友這個div身上。這里不要迷惑，這兩個事件和@click事件一樣，是js原生的事件。并不是我們自己自定義的事件，當(dāng)檢測到用戶在屏幕上按下=時，會自動傳遞$event到相對于的函數(shù)參數(shù)中。

三.設(shè)計touchstart函數(shù)

在此之前，我想解釋一下我的NOTE:為什么要寫考慮用戶只用了一根手指的情況呢？

首先讓我們打印一下傳遞過來的event事件對象有哪些屬性。

在這里最關(guān)鍵的屬性就是這個changedTouches這個屬性，它的值是一個數(shù)組。先來看MDN是怎么解釋這個屬性的。

有點抽象是吧？我來解釋一下這鬼話到底想表達(dá)什么意思。
首先我們需要理解這個屬性為什么是一個數(shù)組。當(dāng)我們的手指去接觸屏幕的時候，瀏覽器會捕獲你這一時間一共幾根指頭接觸到了屏幕。我們可以根據(jù)這個值去做一些不同的判斷。最簡單例子就是，假設(shè)這個數(shù)組changedTouches.length為1，那么說明我只用了一根手指觸摸屏幕，那么我設(shè)計函數(shù)的時候就可以判斷

if(changedTouches.length>0 && changedTOuches.length<2)
{
TODO...
}

我就可以根據(jù)用戶觸摸了幾根手指去做相應(yīng)的幾指操作，用過觸控板的都知道雙指單指三指等都對應(yīng)不同的事件。其實你可以就這樣理解這個屬性為什么要設(shè)計為一個數(shù)組。

在這里我們只考慮用戶只用了一根手指觸摸屏幕滑動的情況。

對應(yīng)下面的代碼，我們已經(jīng)獲取了用戶剛開始觸摸屏幕時，這個點，在這里我們需要看一下這個touchPoint身上哪些屬性。

這個對象身上最為關(guān)鍵的屬性就是圈出來的這個。

額外技能補充 clientX和clientY

先來看一下MDN怎么解釋的。

這里我們需要重點理解這句話，注意一定要理解這個--〉無論頁面是否水平滾動（垂直滾動對應(yīng)著clientY）

在這里我們用圖說話，這里紅色箭頭的點表示用戶觸摸時，我們獲取到的那個點坐標(biāo)，黃色箭頭指向的那段距離，就是clientX。

而clientY也不必多說，就是這段距離

tips：這里的距離都是相對于左上角坐標(biāo)為（0，0）的，這是設(shè)計時默認(rèn)的規(guī)定

pageX和pageY

這兩個雖然我們目前用不到，但是在這里拓展著說一下。還是先看MDN的解釋。

這里還是重點注意理解滾動這兩個字。因為這是和clientX最為核心的不同。

由于我自己這個頁面展示不出來，所以我截取了MDN的一個頁面作為例子。

這是最開始的界面，這里可以看出來，我們的pageX和pageY是和我們的clientX和clienY一摸一樣的，因為起點都是頁面的左上角，頁面還未發(fā)生滾動。

但是一旦我們向下滾動了一段距離，假設(shè)我們向下滾動了200px。

這時候我們的pageY的起點仍是我們之前頁面的起點，而不僅僅是上面的紅線距離了！也就是實際的pageY就等于紅線距離+200px(因為我們沒有向X軸偏移，pageX則還是原來的值)。

如果你看懂了clientY，其實你也能知道，此時pageY=clientY+200px

screenX和screenY

這兩個屬性在日常開發(fā)基本上不會用到，在這里簡單做一下介紹。

用圖來表示就是如下。

當(dāng)我屏幕變大時：

ok，相關(guān)的前置知識我們已經(jīng)了解。在這里就可以拿到用戶點擊時的clientX的值，作為標(biāo)記。

四.設(shè)計touchend函數(shù)

先放總代碼，然后我們一步一步講解。

首先我們要獲取到用戶觸摸的具體div。因為最終也是它要滑動的。

然后和touchStart事件一樣，當(dāng)用戶觸摸松手的時候，也會記錄一個數(shù)組數(shù)據(jù)changedTouches。

很簡單就可以明白，touchStartX-touchEndX不就可以得出用戶到底滑動了多少距離嗎？

我們這里需要一個閥值，作用就是用來看看用戶此次觸摸到底是否真正要向左滑動，調(diào)出刪除按鈕進(jìn)行操作呢？說人話就是，說不定用戶只是輕輕點了一下屏幕呢？

所以在這里就需要簡單的判斷，用戶移動的距離是否大于我們規(guī)定的閥值，如果大于，那么判定用戶是進(jìn)行了這個操作，如果不是，則忽略此次滑動事件。

進(jìn)行判斷并且進(jìn)行操作

上面只是為了實現(xiàn)功能而直接操作了dom，我們可以更優(yōu)雅的解決這個移動問題，需要讀者帶入自己的思考去實現(xiàn)。

五.加上過度動畫

成功實現(xiàn)嘍～

思考題 ：

我的delBtnInitMoveDistance的意思是，刪除按鈕最開始移動的距離，你可以告訴我這樣計算得出的值是什么嗎？為什么可以優(yōu)化代碼嗎？

到此這篇關(guān)于記錄一個Vue3簡易微信右滑邏輯的思路實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3微信右滑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論