記錄一個Vue3簡易微信右滑刪除邏輯的思路實現(xiàn)
今天項目需求需要實現(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是怎么解釋這個屬性的。
有點抽象是吧?我來解釋一下這鬼話到底想表達什么意思。
首先我們需要理解這個屬性為什么是一個數(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)出刪除按鈕進行操作呢?說人話就是,說不定用戶只是輕輕點了一下屏幕呢?
所以在這里就需要簡單的判斷,用戶移動的距離是否大于我們規(guī)定的閥值,如果大于,那么判定用戶是進行了這個操作,如果不是,則忽略此次滑動事件。
進行判斷并且進行操作
上面只是為了實現(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2.0 watch里面的 deep和immediate用法說明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10