左滑刪除在移動(dòng)端是很常見(jiàn)的一種操作，常見(jiàn)于刪除購(gòu)物車中的商品，刪除收藏夾中文章等等場(chǎng)景。我們只需要手指按住要?jiǎng)h除的對(duì)象，然后輕輕向左滑動(dòng)，便會(huì)出現(xiàn)刪除按鈕，然后點(diǎn)擊刪除按鈕即可刪除對(duì)象。

 點(diǎn)擊下載源碼

今天我給大家介紹的移動(dòng)端左滑刪除效果是基于Vue2實(shí)現(xiàn)的，結(jié)合以電商平臺(tái)的刪除購(gòu)物車商品為例，來(lái)看實(shí)現(xià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，然后編寫(xiě)模板代碼：

<template>  <div class="delete">    <div class="slider">      <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider">        <!-- 插槽中放具體項(xiàng)目中需要內(nèi)容 -->        <slot name="img"></slot>        <slot name="title"></slot>        <slot name="price"></slot>        <!-- 默認(rèn)插槽 -->        <slot></slot>      </div>      <div class="remove" ref='remove' @click="deleteLine">        刪除      </div>    </div>  </div></template>

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

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

<script>export default {  props: ['index'],  data() {    return {      startX: 0,  //觸摸位置      endX: 0,   //結(jié)束位置      moveX: 0,  //滑動(dòng)時(shí)的位置      disX: 0,  //移動(dòng)距離      deleteSlider: '',//滑動(dòng)時(shí)的效果,使用v-bind:style="deleteSlider"    }  },  methods:{    touchStart(ev){      ev = ev || event      //tounches類數(shù)組，等于1時(shí)表示此時(shí)有只有一只手指在觸摸屏幕      if(ev.touches.length == 1){        // 記錄開(kāi)始位置        this.startX = ev.touches[0].clientX;      }    },    touchMove(ev){      ev = ev || event;      //獲取刪除按鈕的寬度，此寬度為滑塊左滑的最大距離      let wd = this.$refs.remove.offsetWidth;      if(ev.touches.length == 1) {        // 滑動(dòng)時(shí)距離瀏覽器左側(cè)實(shí)時(shí)距離        this.moveX = ev.touches[0].clientX        //起始位置減去 實(shí)時(shí)的滑動(dòng)的距離，得到手指實(shí)時(shí)偏移距離        this.disX = this.startX - this.moveX;        //console.log(this.disX)        // 如果是向右滑動(dòng)或者不滑動(dòng)，不改變滑塊的位置        if (this.disX < 0 || this.disX == 0) {          this.deleteSlider = "transform:translateX(0px)";        } else if (this.disX > 0) {// 大于0，表示左滑了，此時(shí)滑塊開(kāi)始滑動(dòng)           //具體滑動(dòng)距離我取的是 手指偏移距離*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)        //如果距離小于刪除按鈕一半,強(qiáng)行回到起點(diǎn)        if ((this.disX*5) < (wd/2)) {          this.deleteSlider = "transform:translateX(0px)";        }else{          //大于一半 滑動(dòng)到最大值          this.deleteSlider = "transform:translateX(-"+wd+ "px)";        }      }    },    deleteLine (){      this.deleteSlider = "transform:translateX(0px)";      this.$emit('deleteLine');    }    }}</script>