欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

記錄一個Vue3簡易微信右滑刪除邏輯的思路實現(xiàn)

 更新時間:2022年07月20日 10:52:27   作者:韓振方  
本文主要介紹了記錄一個Vue3簡易微信右滑邏輯的思路實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

一.搭建簡易的頁面

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

二.前置條件

這里先來梳理一下思路。

首先,我們需要給這刪除按鈕組件打上ref,因為之后我們需要用到這個div的實例。(wrapperref是只是為了優(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)鍵的屬性就是圈出來的這個。

額外技能補充 clientXclientY

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

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

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

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

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

pageXpageY

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

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

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

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

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

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

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

screenXscreenY

這兩個屬性在日常開發(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)文章

  • 詳解vue的數(shù)據(jù)binding綁定原理

    詳解vue的數(shù)據(jù)binding綁定原理

    這篇文章主要介紹了詳解vue的數(shù)據(jù)binding原理介紹,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • vue2.0 watch里面的 deep和immediate用法說明

    vue2.0 watch里面的 deep和immediate用法說明

    這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue項目使用CDN優(yōu)化首屏加載問題

    Vue項目使用CDN優(yōu)化首屏加載問題

    這篇文章主要介紹了Vue項目使用CDN優(yōu)化首屏加載問題,本文以vue、vuex、vue-touter為例,給大家介紹處理流程,需要的朋友可以參考下
    2018-04-04
  • vue嵌套組件傳參實例分享

    vue嵌套組件傳參實例分享

    這篇文章主要介紹了vue嵌套組件傳參實例分享,本文以一個vue遞歸組件為例,探究多層嵌套后事件無法觸發(fā)的問題,我們可以通過查看一Demo,便于快速了解,下文列舉例子需要的小伙伴可以參考一下
    2022-04-04
  • vue項目中使用require.context引入組件

    vue項目中使用require.context引入組件

    本文主要介紹了vue項目中使用require.context引入組件,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vant中的toast輕提示實現(xiàn)代碼

    vant中的toast輕提示實現(xiàn)代碼

    這篇文章主要介紹了vant中的toast輕提示實現(xiàn)代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue項目配置使用flow類型檢查的步驟

    vue項目配置使用flow類型檢查的步驟

    這篇文章主要介紹了vue項目配置使用flow類型檢查的步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • Vue?組件上的v-model雙向綁定原理解析

    Vue?組件上的v-model雙向綁定原理解析

    這篇文章主要介紹了Vue?組件上的v-model雙向綁定原理,從本文的學(xué)習(xí)可以知道組件上v-model指令的本質(zhì)也是生成了value屬性和input事件,具體實例代碼跟隨小編一起看看吧
    2022-05-05
  • Vue3.js自定義組件 v-model詳解

    Vue3.js自定義組件 v-model詳解

    在Vue3 中,v-model是用于創(chuàng)建雙向數(shù)據(jù)綁定的指令,通常,我們使用該指令將任何 HTML 表單元素與一個變量綁定以收集輸入值,本文給大家介紹Vue3.js自定義組件 v-model,感興趣的朋友一起看看吧
    2023-10-10
  • vue如何向后臺傳遞日期

    vue如何向后臺傳遞日期

    這篇文章主要介紹了vue如何向后臺傳遞日期,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06

最新評論