在vue2中如何实现左滑删除功能

这篇文章主要为大家详细介绍了基于vue2实现左滑删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

因为用UI框架，还得改底层代码= =所以，我们小组就直接写了一个- -，心累……此组件多地方使用，所以建议还是放到common下。。

  
    
          
    
    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) {如果是向左滑动，则实时给这个根元素一个向左的偏移-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);      }    }  }  .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;  }

登录后复制

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

立即学习“前端免费学习笔记（深入）”；

  
 
      
                                
    
  
  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() {  }  }

登录后复制

然后就完成了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在AngularJS中有关于MVC的复杂操作

使用CommonsChunkPlugin如何做才能抽取公共模块

使用ReactNative如何实现Toast

Angular CLI安装教程

以上就是在vue2中如何实现左滑删除功能的详细内容，更多请关注【创想鸟】其它相关文章！