這篇文章主要介紹vue2如何實(shí)現(xiàn)左滑刪除功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括碌曲網(wǎng)站建設(shè)、碌曲網(wǎng)站制作、碌曲網(wǎng)頁(yè)制作以及碌曲網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，碌曲網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到碌曲省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

左滑刪除，很多UI框架里有，比如Mint-UI， Muse-UI等，一開(kāi)始我們就是用的這兩個(gè)，但是我們需求是要：左滑的時(shí)候出現(xiàn)img然后來(lái)實(shí)現(xiàn)點(diǎn)擊刪除，如下：

因?yàn)橛肬I框架，還得改底層代碼= =所以，我們小組就直接寫(xiě)了一個(gè)- -，心累……此組件多地方使用，所以建議還是放到common下。。

<template>
  <div class="left-delete">
    <div class="move"
       @touchstart="_touchStart"
       @touchmove="_touchMove"
       @touchend="_touchEnd"
       :>
      <slot></slot>
    </div>
    <div class="deleteIcon" : @click.prevent="deleteItem(index)"></div>
  </div>
</template>

<script>
  export default {
    props: {
      index: Number
    },
    data() {
      return {
        startX: 0,    //觸摸位置
         moveX: 0,    //滑動(dòng)時(shí)的位置
         disX: 0,    //移動(dòng)距離
         txtStyle: '',
        delWidth: 200,
        top: '',
        zIndex: 'z-index:-1',
      }
    },
    methods: {
      _touchStart: function(ev) {
        ev = ev || event;
        if(ev.touches.length == 1){
          // 手指按下的時(shí)候記錄按下的位置
          this.startX = ev.touches[0].clientX;
          console.log(this.startX)
        }
      },
      _touchMove: function(ev) {
        ev = ev || event;
        if(ev.touches.length == 1) {
          // 滑動(dòng)過(guò)程中的實(shí)時(shí)位置
          this.moveX = ev.touches[0].clientX
          // 滑動(dòng)過(guò)程中實(shí)時(shí)計(jì)算滑動(dòng)距離
          this.disX = this.startX - this.moveX;
          // console.log('disX==>',this.disX)
          // 如果是向右滑動(dòng)或者只是點(diǎn)擊，不改變滑動(dòng)位置
          if(this.disX < 0 || this.disX == 0) {
            // console.log('沒(méi)有移動(dòng)');
            this.txtStyle = "transform:translateX(0rem)";
          }else if (this.disX > 0) {
如果是向左滑動(dòng)，則實(shí)時(shí)給這個(gè)根元素一個(gè)向左的偏移-left，當(dāng)偏移量到達(dá)固定值delWidth時(shí)，固定元素的偏移量為 delWidth
            this.txtStyle = "transform:translateX(-" + this.disX/100 + "rem)";
            if (this.disX >= this.delWidth/100) {
              this.txtStyle = "transform:translateX(-" + this.delWidth/100 + "rem)";
              this.zIndex = "z-index:" + 10 + "rem";
            }
          }
        }
      },
      _touchEnd: function(ev) {
        if (event.changedTouches.length == 1) {
          this.startX = 0;
          this.zIndex = "z-index:" + -1 + "rem";
          console.log(event.changedTouches[0].clientX)
          // 手指移動(dòng)結(jié)束后的水平位置
          let endX = event.changedTouches[0].clientX;
          // 觸摸開(kāi)始與結(jié)束,手指移動(dòng)的距離
          this.disX = this.startX - endX;
          //如果距離小于刪除按鈕的1/2，不顯示刪除按鈕
        }
      },
      deleteItem: function(index) {
        this.$emit('deleteItem', index);
      }
    }
  }
</script>

<style>
  .left-delete{
    width:100%;
    height:100%;
    position:relative;
    z-index:2;
  }
  .move{
    position: relative;
  }
  .deleteIcon{
    width: 2rem;
    height:100%;
    position: absolute;
    right:0;
    top:0;
    background:url(./../../assets/main/4.png) no-repeat;
    background-size: contain;
  }
</style>

然后哪個(gè)頁(yè)面需要，哪個(gè)頁(yè)面引入就好。比如myCollect頁(yè)面需要，那么如下：

<template>
  <section class="myCollect">
 <section>
      <div v-for="(item,index) in collectionList">
        <left-slider :index="index" @deleteItem="deleteItem">
          <Financial :item="item" :index="index"></Financial>
        </left-slider>
      </div>
    </section>
  </section>
</template>
<script>
  import api from './../../fetch/api';
  import { mapGetters } from 'vuex';

  import Financial from './../common/financial.vue';
  import LeftSlider from './../common/leftSlider.vue';

  export default {
    name: 'MyCollect',
    props: {
      item: Object,
      index: Number
    },
    components: {
      Financial,
      LeftSlider
    },
    data() {
      return {

      }
    },
    created() {
      this.getCollectionList();
    },
    methods: {

    },
    computed: {
        ...mapGetters([
          'getContextPathSrc',
          'sessionId',
          'token'
        ]),
  },
  methods: {
    // 刪除
    deleteItem: function(index) {
      api.commonApi('后臺(tái)接口，請(qǐng)求數(shù)據(jù)')//此處api是封裝的axios，詳情看文章：vue2+vuex+axios即可
          .then(res => {
        console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);
      this.collectionList.splice(index, 1);
    });
    }
  },
  mounted() {

  }
  }
</script>

然后就完成了。

以上是“vue2如何實(shí)現(xiàn)左滑刪除功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：vue2如何實(shí)現(xiàn)左滑刪除功能
標(biāo)題網(wǎng)址：http://chinadenli.net/article28/ipdhcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站建設(shè)、做網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)