左滑刪除在移動端是很常見的一種操作，常見于刪除購物車中的商品，刪除收藏夾中文章等等場景。我們只需要手指按住要刪除的對象，然后輕輕向左滑動，便會出現刪除按鈕，然后點擊刪除按鈕即可刪除對象。

點擊下載源碼

今天我給大家介紹的移動端左滑刪除效果是基于Vue2實現的，結合以電商平臺的刪除購物車商品為例，來看實現步驟。

準備

安裝vue項目過程已忽略，如果不懂vue的同學可以上官網看下：https://cn.vuejs.org/v2/guide/installation.html#NPM

我們使用安裝一個webpack模板：

vue init webpack test

組件

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

我們這個模板是一個要左滑刪除的列表項，綁定了手勢滑動觸控動作響應，在其中加入了圖片、商品名稱和價格等內容，以及一個刪除按鈕。

接下來，我們看組件中的js部分：

export default {

props: ['index'],

data() {

return {

startX: 0, //觸摸位置

endX: 0, //結束位置

moveX: 0, //滑動時的位置

disX: 0, //移動距離

deleteSlider: '',//滑動時的效果,使用v-bind:style="deleteSlider"

}

},

methods:{

touchStart(ev){

ev = ev || event

//tounches類數組，等于1時表示此時有只有一只手指在觸摸屏幕

if(ev.touches.length == 1){

// 記錄開始位置

this.startX = ev.touches[0].clientX;

}

},

touchMove(ev){

ev = ev || event;

//獲取刪除按鈕的寬度，此寬度為滑塊左滑的最大距離

let wd = this.$refs.remove.offsetWidth;

if(ev.touches.length == 1) {

// 滑動時距離瀏覽器左側實時距離

this.moveX = ev.touches[0].clientX

//起始位置減去 實時的滑動的距離，得到手指實時偏移距離

this.disX = this.startX - this.moveX;

//console.log(this.disX)

// 如果是向右滑動或者不滑動，不改變滑塊的位置

if (this.disX < 0 || this.disX == 0) {

this.deleteSlider = "transform:translateX(0px)";

} else if (this.disX > 0) {// 大于0，表示左滑了，此時滑塊開始滑動

//具體滑動距離我取的是 手指偏移距離*5。

this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)";

// 最大也只能等于刪除按鈕寬度

if (this.disX*5 >= wd) {

this.deleteSlider = "transform:translateX(-" +wd+ "px)";

}

}

}

},

touchEnd(ev){

ev = ev || event;

let wd = this.$refs.remove.offsetWidth;

if (ev.changedTouches.length == 1) {

let endX = ev.changedTouches[0].clientX;

this.disX = this.startX - endX;

//console.log(this.disX)

//如果距離小于刪除按鈕一半,強行回到起點

if ((this.disX*5) < (wd/2)) {

this.deleteSlider = "transform:translateX(0px)";

}else{

//大于一半 滑動到最大值

this.deleteSlider = "transform:translateX(-"+wd+ "px)";

}

}

},

deleteLine (){

this.deleteSlider = "transform:translateX(0px)";

this.$emit('deleteLine');

}

}

}

我們在代碼中主要用到三個移動端觸控事件：

touchstart : 手指放到屏幕上時觸發

touchmove : 手指在屏幕上滑動式觸發

touchend ：手指離開屏幕時觸發

每個觸控事件被觸發后，會生成一個event對象，event對象里額外包括以下三個觸控列表

touches : 當前屏幕上所有手指的列表

targetTouches : 當前dom元素上手指的列表，盡量使用這個代替touches

changedTouches : 涉及當前事件的手指的列表，盡量使用這個代替touches

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

clientX / clientY : 觸摸點相對瀏覽器窗口的位置

pageX / pageY : 觸摸點相對于頁面的位置

screenX / screenY : 觸摸點相對于屏幕的位置

在上述代碼中還可以看到，當滑塊沒有超過刪除按鈕的一半時自動回到起點位置。點擊刪除后調用deleteLine刪除當前行。

組件調用

我們在HelloWorld.vue中建立模板，引入組件deleteSlider，代碼如下：

import deleteSlider from '@/components/deleteTemplate.vue'

export default {

components: {

deleteSlider

},

data () {

return {

dataList: [

{

id: 1,

img: 'static/a1.jpg',

title: '法國專柜2019夏季新款修身顯瘦氣質包臀短裙鏤空蕾絲性感連衣裙子',

price: '399.00'

},

{

id: 2,

img: 'static/a2.jpg',

title: 'VERAMOON 亮片印花短袖連衣裙女夏甜美露背性感泡泡袖修身短裙',

price: '689.00'

},

{

id: 3,

img: 'static/a3.jpg',

title: 'famous 仙氣木耳邊紫色小碎花短裙a字雪紡連衣裙女',

price: '199.00'

},

{

id: 4,

img: 'static/a4.jpg',

title: '灰灰定制 2019春夏新款小香風粗花呢連衣裙女法式名媛復古短裙M家',

price: '298.00'

}

]

}

},

methods:{

deleteLine (index, id){

console.log(id);

this.dataList.splice(index, 1)

}

}

}

注意實際應用中數據源可用異步加載，在刪除的時候或許要異步請求后端來真正完成刪除操作。

總結

以上所述是小編給大家介紹的使用Vue實現移動端左滑刪除效果附源碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！