当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 基于vue2实现左滑删除功能

基于vue2实现左滑删除功能

2017年12月08日  | 移动技术网IT编程  | 我要评论

红颜乱冷王追妃,青岛胶南信息港,奥巴马勇闯恐龙岛

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

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

<template>
  <div class="left-delete">
    <div class="move"
       @touchstart="_touchstart"
       @touchmove="_touchmove"
       @touchend="_touchend"
       :style="txtstyle">
      <slot></slot>
    </div>
    <div class="deleteicon" :style="zindex" @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>

然后就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网