Comment implémenter la fonction slide gauche pour supprimer dans vue2

Cet article présente principalement en détail la fonction de suppression par balayage vers la gauche basée sur vue2. Elle a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Suppression par balayage vers la gauche, qui est incluse dans de nombreux frameworks d'interface utilisateur. tels que Mint-UI, Muse-UI, etc. Nous avons utilisé ces deux-là depuis le début, mais notre exigence est la suivante : lorsque l'image apparaît en balayant vers la gauche, cliquez pour supprimer, comme suit :

Parce que le framework UI est utilisé, le code sous-jacent doit être modifié == Donc, notre équipe a directement écrit un - -, ce qui était très fatiguant... Ce composant est utilisé dans de nombreux endroits, il est donc recommandé pour le mettre sous commun. .

<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>

Ensuite, importez-le simplement dans la page qui en a besoin. Par exemple, si la page myCollect le requiert, alors c'est comme suit :

<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>

Ensuite c'est complété.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Opérations complexes sur MVC dans AngularJS

Comment utiliser CommonsChunkPlugin pour extraire des modules publics

Comment implémenter Toast à l'aide de ReactNative

Tutoriel d'installation d'Angular CLI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!