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

一.搭建簡易的頁面

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

二.前置條件

這里先來梳理一下思路。

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

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

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

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

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

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

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

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

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

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

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

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

額外技能補(bǔ)充 clientX和clientY

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

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

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

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

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

pageX和pageY

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

這里還是重點(diǎn)注意理解滾動(dòng)這兩個(gè)字。因?yàn)檫@是和clientX最為核心的不同。

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

這是最開始的界面，這里可以看出來，我們的pageX和pageY是和我們的clientX和clienY一摸一樣的，因?yàn)槠瘘c(diǎn)都是頁面的左上角，頁面還未發(fā)生滾動(dòng)。

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

這時(shí)候我們的pageY的起點(diǎn)仍是我們之前頁面的起點(diǎn)，而不僅僅是上面的紅線距離了！也就是實(shí)際的pageY就等于紅線距離+200px(因?yàn)槲覀儧]有向X軸偏移，pageX則還是原來的值)。

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

screenX和screenY

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

用圖來表示就是如下。

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

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

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

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

首先我們要獲取到用戶觸摸的具體div。因?yàn)樽罱K也是它要滑動(dòng)的。

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

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

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

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

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

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

五.加上過度動(dòng)畫

成功實(shí)現(xiàn)嘍～

思考題 ：

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

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

最新評(píng)論