這篇文章給大家分享的是有關(guān)如何使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)河南免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

準(zhǔn)備

安裝vue項(xiàng)目過(guò)程已忽略，如果不懂vue的同學(xué)可以上官網(wǎng)看下：https://cn.vuejs.org/v2/guide/installation.html#NPM

我們使用安裝一個(gè)webpack模板：

vue init webpack test

組件

我們創(chuàng)建一個(gè)左滑刪除組件，在src/components目錄下創(chuàng)建文件：deleteTemplate.vue，然后編寫模板代碼：

我們這個(gè)模板是一個(gè)要左滑刪除的列表項(xiàng)，綁定了手勢(shì)滑動(dòng)觸控動(dòng)作響應(yīng)，在其中加入了圖片、商品名稱和價(jià)格等內(nèi)容，以及一個(gè)刪除按鈕。

接下來(lái)，我們看組件中的js部分：

我們?cè)诖a中主要用到三個(gè)移動(dòng)端觸控事件：

touchstart : 手指放到屏幕上時(shí)觸發(fā)

touchmove : 手指在屏幕上滑動(dòng)式觸發(fā)

touchend ：手指離開屏幕時(shí)觸發(fā)

每個(gè)觸控事件被觸發(fā)后，會(huì)生成一個(gè)event對(duì)象，event對(duì)象里額外包括以下三個(gè)觸控列表

touches : 當(dāng)前屏幕上所有手指的列表

targetTouches : 當(dāng)前dom元素上手指的列表，盡量使用這個(gè)代替touches

changedTouches : 涉及當(dāng)前事件的手指的列表，盡量使用這個(gè)代替touches

這些列表里的每次觸控由touch對(duì)象組成，touch對(duì)象里包含著觸控信息，主要屬性如下：

clientX / clientY : 觸摸點(diǎn)相對(duì)瀏覽器窗口的位置

pageX / pageY : 觸摸點(diǎn)相對(duì)于頁(yè)面的位置

screenX / screenY : 觸摸點(diǎn)相對(duì)于屏幕的位置

在上述代碼中還可以看到，當(dāng)滑塊沒(méi)有超過(guò)刪除按鈕的一半時(shí)自動(dòng)回到起點(diǎn)位置。點(diǎn)擊刪除后調(diào)用deleteLine刪除當(dāng)前行。

組件調(diào)用

我們?cè)贖elloWorld.vue中建立模板，引入組件deleteSlider，代碼如下：

注意實(shí)際應(yīng)用中數(shù)據(jù)源可用異步加載，在刪除的時(shí)候或許要異步請(qǐng)求后端來(lái)真正完成刪除操作。

感謝各位的閱讀！關(guān)于“如何使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享標(biāo)題：如何使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://weahome.cn/article/dijjsh.html