記錄一個(gè)Vue3簡(jiǎn)易微信右滑刪除邏輯的思路實(shí)現(xiàn)
今天項(xiàng)目需求需要實(shí)現(xiàn)一個(gè)類似于微信右滑顯示額外選項(xiàng)的功能,記錄一下實(shí)現(xiàn)思路。
一.搭建簡(jiǎn)易的頁(yè)面
對(duì)應(yīng)的代碼,界面使用了tailwindCSS
,代碼非常簡(jiǎn)單,就是普通的定位,關(guān)鍵的定位已經(jīng)用黃色框框圈出。right
的值為div刪除的寬度,其它的樣式這里不再過(guò)多贅述。
二.前置條件
這里先來(lái)梳理一下思路。
首先,我們需要給這刪除按鈕組件打上ref
,因?yàn)橹笪覀冃枰玫竭@個(gè)div
的實(shí)例。(wrapper
的ref
是只是為了優(yōu)化代碼,我們暫時(shí)不需要)這里我們需要用到TouchEvent
這個(gè)事件,我們?cè)跒g覽器開發(fā)者工具測(cè)試時(shí),需要調(diào)節(jié)自適應(yīng)到手機(jī)的模式才可以看到效果。
我們把@touchstart
和@touchend
這兩個(gè)原生事件綁定到和朋友這個(gè)div
身上。這里不要迷惑,這兩個(gè)事件和@click
事件一樣,是js
原生的事件。并不是我們自己自定義的事件,當(dāng)檢測(cè)到用戶在屏幕上按下=時(shí),會(huì)自動(dòng)傳遞$event
到相對(duì)于的函數(shù)參數(shù)中。
三.設(shè)計(jì)touchstart函數(shù)
在此之前,我想解釋一下我的NOTE:
為什么要寫考慮用戶只用了一根手指的情況呢?
首先讓我們打印一下傳遞過(guò)來(lái)的event
事件對(duì)象有哪些屬性。
在這里最關(guān)鍵的屬性就是這個(gè)changedTouches
這個(gè)屬性,它的值是一個(gè)數(shù)組。先來(lái)看MDN是怎么解釋這個(gè)屬性的。
有點(diǎn)抽象是吧?我來(lái)解釋一下這鬼話到底想表達(dá)什么意思。
首先我們需要理解這個(gè)屬性為什么是一個(gè)數(shù)組。當(dāng)我們的手指去接觸屏幕的時(shí)候,瀏覽器會(huì)捕獲你這一時(shí)間一共幾根指頭接觸到了屏幕。我們可以根據(jù)這個(gè)值去做一些不同的判斷。最簡(jiǎn)單例子就是,假設(shè)這個(gè)數(shù)組changedTouches.length
為1,那么說(shuō)明我只用了一根手指觸摸屏幕,那么我設(shè)計(jì)函數(shù)的時(shí)候就可以判斷
if(changedTouches.length>0 && changedTOuches.length<2) { TODO... }
我就可以根據(jù)用戶觸摸了幾根手指去做相應(yīng)的幾指操作,用過(guò)觸控板的都知道雙指單指三指等都對(duì)應(yīng)不同的事件。其實(shí)你可以就這樣理解這個(gè)屬性為什么要設(shè)計(jì)為一個(gè)數(shù)組。
在這里我們只考慮用戶只用了一根手指觸摸屏幕滑動(dòng)的情況。
對(duì)應(yīng)下面的代碼,我們已經(jīng)獲取了用戶剛開始觸摸屏幕時(shí),這個(gè)點(diǎn),在這里我們需要看一下這個(gè)touchPoint
身上哪些屬性。
這個(gè)對(duì)象身上最為關(guān)鍵的屬性就是圈出來(lái)的這個(gè)。
額外技能補(bǔ)充 clientX
和clientY
先來(lái)看一下MDN怎么解釋的。
這里我們需要重點(diǎn)理解這句話,注意一定要理解這個(gè)--〉無(wú)論頁(yè)面是否水平滾動(dòng)(垂直滾動(dòng)對(duì)應(yīng)著clientY)
在這里我們用圖說(shuō)話,這里紅色箭頭的點(diǎn)表示用戶觸摸時(shí),我們獲取到的那個(gè)點(diǎn)坐標(biāo),黃色箭頭指向的那段距離,就是clientX
。
而clientY
也不必多說(shuō),就是這段距離
tips:這里的距離都是相對(duì)于左上角坐標(biāo)為(0,0)的,這是設(shè)計(jì)時(shí)默認(rèn)的規(guī)定
pageX
和pageY
這兩個(gè)雖然我們目前用不到,但是在這里拓展著說(shuō)一下。還是先看MDN的解釋。
這里還是重點(diǎn)注意理解滾動(dòng)
這兩個(gè)字。因?yàn)檫@是和clientX
最為核心的不同。
由于我自己這個(gè)頁(yè)面展示不出來(lái),所以我截取了MDN的一個(gè)頁(yè)面作為例子。
這是最開始的界面,這里可以看出來(lái),我們的pageX
和pageY
是和我們的clientX
和clienY
一摸一樣的,因?yàn)槠瘘c(diǎn)都是頁(yè)面的左上角,頁(yè)面還未發(fā)生滾動(dòng)。
但是一旦我們向下滾動(dòng)了一段距離,假設(shè)我們向下滾動(dòng)了200px
。
這時(shí)候我們的pageY
的起點(diǎn)仍是我們之前頁(yè)面的起點(diǎn),而不僅僅是上面的紅線距離了!也就是實(shí)際的pageY
就等于紅線距離+200px
(因?yàn)槲覀儧]有向X軸偏移,pageX
則還是原來(lái)的值)。
如果你看懂了clientY
,其實(shí)你也能知道,此時(shí)pageY
=clientY
+200px
screenX
和screenY
這兩個(gè)屬性在日常開發(fā)基本上不會(huì)用到,在這里簡(jiǎn)單做一下介紹。
用圖來(lái)表示就是如下。
當(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
。
很簡(jiǎn)單就可以明白,touchStartX-touchEndX
不就可以得出用戶到底滑動(dòng)了多少距離嗎?
我們這里需要一個(gè)閥值,作用就是用來(lái)看看用戶此次觸摸到底是否真正要向左滑動(dòng),調(diào)出刪除按鈕進(jìn)行操作呢?說(shuō)人話就是,說(shuō)不定用戶只是輕輕點(diǎn)了一下屏幕呢?
所以在這里就需要簡(jiǎ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)。
五.加上過(guò)度動(dòng)畫
成功實(shí)現(xiàn)嘍~
思考題 :
我的delBtnInitMoveDistance
的意思是,刪除按鈕最開始移動(dòng)的距離,你可以告訴我這樣計(jì)算得出的值是什么嗎?為什么可以優(yōu)化代碼嗎?
到此這篇關(guān)于記錄一個(gè)Vue3簡(jiǎn)易微信右滑邏輯的思路實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3微信右滑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法
- 基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果
- Vue路由切換時(shí)的左滑和右滑效果示例
- vue移動(dòng)端的左右滑動(dòng)事件詳解
- vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場(chǎng)動(dòng)畫
- Vue實(shí)現(xiàn)tab導(dǎo)航欄并支持左右滑動(dòng)功能
- vue實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航
- vue實(shí)現(xiàn)左右滑動(dòng)效果實(shí)例代碼
- Vue可左右滑動(dòng)按鈕組組件使用詳解
相關(guān)文章
vue2.0 watch里面的 deep和immediate用法說(shuō)明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題
這篇文章主要介紹了Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題,本文以vue、vuex、vue-touter為例,給大家介紹處理流程,需要的朋友可以參考下2018-04-04vue項(xiàng)目中使用require.context引入組件
本文主要介紹了vue項(xiàng)目中使用require.context引入組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08