So implementieren Sie die Funktion „Linke Folie zum Löschen' in vue2

Dieser Artikel stellt hauptsächlich die auf vue2 basierende Funktion zum Löschen durch Linkswischen vor. Interessierte Freunde können sich auf

Löschen durch Linkswischen beziehen, das in vielen UI-Frameworks enthalten ist. wie Mint-UI, Muse-UI usw. Wir haben diese beiden von Anfang an verwendet, aber unsere Anforderung ist: Wenn das Bild beim Wischen nach links erscheint, klicken Sie zum Löschen wie folgt:

Da wir das UI-Framework verwenden, müssen wir den zugrunde liegenden Code ändern = =Also hat unser Team direkt ein - - geschrieben, was sehr ermüdend war ... Diese Komponente wird an vielen Stellen verwendet, daher wird dies empfohlen schreibe es unter „gemeinsam“. .

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

<script>
  export default {
    props: {
      index: Number
    },
    data() {
      return {
        startX: 0,    //触摸位置
         moveX: 0,    //滑动时的位置
         disX: 0,    //移动距离
         txtStyle: &#39;&#39;,
        delWidth: 200,
        top: &#39;&#39;,
        zIndex: &#39;z-index:-1&#39;,
      }
    },
    methods: {
      _touchStart: function(ev) {
        ev = ev || event;
        if(ev.touches.length == 1){
          // 手指按下的时候记录按下的位置
          this.startX = ev.touches[0].clientX;
          console.log(this.startX)
        }
      },
      _touchMove: function(ev) {
        ev = ev || event;
        if(ev.touches.length == 1) {
          // 滑动过程中的实时位置
          this.moveX = ev.touches[0].clientX
          // 滑动过程中实时计算滑动距离
          this.disX = this.startX - this.moveX;
          // console.log(&#39;disX==>&#39;,this.disX)
          // 如果是向右滑动或者只是点击，不改变滑动位置
          if(this.disX < 0 || this.disX == 0) {
            // console.log(&#39;没有移动&#39;);
            this.txtStyle = "transform:translateX(0rem)";
          }else if (this.disX > 0) {
如果是向左滑动，则实时给这个根元素一个向左的偏移-left，当偏移量到达固定值delWidth时，固定元素的偏移量为 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)
          // 手指移动结束后的水平位置
          let endX = event.changedTouches[0].clientX;
          // 触摸开始与结束,手指移动的距离
          this.disX = this.startX - endX;
          //如果距离小于删除按钮的1/2，不显示删除按钮
        }
      },
      deleteItem: function(index) {
        this.$emit(&#39;deleteItem&#39;, 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>

Dann importieren Sie es einfach in die Seite, die es benötigt. Wenn es beispielsweise für die myCollect-Seite erforderlich ist, lautet es wie folgt:

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

  import Financial from &#39;./../common/financial.vue&#39;;
  import LeftSlider from &#39;./../common/leftSlider.vue&#39;;

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

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

    },
    computed: {
        ...mapGetters([
          &#39;getContextPathSrc&#39;,
          &#39;sessionId&#39;,
          &#39;token&#39;
        ]),
  },
  methods: {
    // 删除
    deleteItem: function(index) {
      api.commonApi(&#39;后台接口，请求数据&#39;)//此处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>

Dann ist es abgeschlossen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Komplexe Operationen zu MVC in AngularJS

So verwenden Sie CommonsChunkPlugin zum Extrahieren öffentlicher Module

So implementieren Sie Toast mit ReactNative

Angular CLI-Installationsanleitung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion „Linke Folie zum Löschen' in vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!