如何使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果

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

準(zhǔn)備

安裝vue項(xiàng)目過程已忽略，如果不懂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，然后編寫模板代碼：

<template>
  <div class="delete">
    <div class="slider">
      <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :>
        <!-- 插槽中放具體項(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è)刪除按鈕。

接下來，我們看組件中的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:
    }
  },
  methods:{
    touchStart(ev){
      ev = ev || event
      //tounches類數(shù)組，等于1時(shí)表示此時(shí)有只有一只手指在觸摸屏幕
      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) {
        // 滑動(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í)滑塊開始滑動(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>

我們?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ì)于頁面的位置

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

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

組件調(diào)用

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

<template>
 <div class="mylist">  
  <delete-slider v-for="(list, index) in dataList" :key="index" @deleteLine="deleteLine(index, list.id)">
   <div class="li-img" slot="img"><img :src="list.img" alt=""></div>
   <h4 class="li-title" slot="title">{{list.title}}</h4>
   <p class="li-price" slot="price">{{list.price}}</p>
  </delete-slider> 
 </div>
</template>

<script>


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

export default {
 components: {
  deleteSlider
 },
 data () {
  return {
   dataList: [
    {
     id: 1,
     img: 'static/a1.jpg',
     title: '法國專柜2019夏季新款修身顯瘦氣質(zhì)包臀短裙鏤空蕾絲性感連衣裙子',
     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春夏新款小香風(fēng)粗花呢連衣裙女法式名媛復(fù)古短裙M家',
     price: '298.00'
    }
   ]
  }
 },
 methods:{
   deleteLine (index, id){
    console.log(id);
    
    this.dataList.splice(index, 1)
   }   
  }
}
</script>

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

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