vue怎么实现左滑删除功能

本篇内容介绍了“Vue怎么实现左滑删除功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

左滑删除，很多UI框架里有，比如Mint-UI， Muse-UI等，一开始我们就是用的这两个，但是我们需求是要：左滑的时候出现img然后来实现点击删除，如下：

建议还是放到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,    //滑动时的位置         disX: 0,    //移动距离         txtStyle: '',        delWidth: 200,        top: '',        zIndex: 'z-index:-1',      }    },    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('disX==>',this.disX)          // 如果是向右滑动或者只是点击，不改变滑动位置          if(this.disX < 0 || this.disX == 0) {            // console.log('没有移动');            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('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>

然后哪个页面需要，哪个页面引入就好。比如myCollect页面需要，那么如下：

<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('后台接口，请求数据')//此处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>

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

“vue怎么实现左滑删除功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！