基于vue指令的左滑删除

left-move-delete

A Vue.js project
完整demo代码git地址：https://github.com/Jacky-MYD/left-move,有需要的可以下载

商品列表、购物车或者关注商品等等

在移动端开发中，尤其是开发商城项目，可以用到该功能。
现在我们通过vue的指令（directives）来实现该功能，先看下面的效果图

效果图

gif.gif

  首先我们先注册一个自定义指令
  import LeftMove from './leftMove' // 引入指令中的一些方法
  function init(vue) {
      vue.directive('LeftMove', LeftMove);
  }
  export default {
      init: init
  }
  在main.js中全剧注册该指令
  import directives from './directives';
  directives.init(Vue);

  leftMove.js中的方法
  实例一个TouchMove对象,并且接收绑定的demo节点
  inserted(el, bind) {
      let touchdelt = new TouchMove(el,bind);
      el._touchdel = touchdelt;
  }
  创建一个构造函数，并且监听绑定对象的touchstart, touchmove, touchend事件
  function TouchMove(el, bind) {
      this.el = el;
      this.bind = bind;
      this.startX = 0;
      this.startY = 0;
      this.x = 0;

      if (bind.value.container) {
          this.closest = util.closest(el, bind.value.container)
      }
      this.touchstart = touchstart.bind(this)
      this.touchmove = util.rafThrottle(touchmove).bind(this)
      this.touchend = touchend.bind(this)
      this.bindEvents();
  }
  // 添加事件句柄
  TouchMove.prototype.bindEvents = function() {
      this.unbindEvents();
      this.el.style.transform = 'translateX(0)';
      this.el.addEventListener('touchstart', this.touchstart, false);
      this.el.addEventListener('touchmove', this.touchmove, false);
      this.el.addEventListener('touchend', this.touchend, false);
  };
   // 移除事件句柄
  TouchMove.prototype.unbindEvents = function() {
      this.el.style.transform = 'translateX(0)';
      this.el.removeEventListener('touchstart', this.touchstart);
      this.el.removeEventListener('touchmove', this.touchmove);
      this.el.removeEventListener('touchend', this.touchend);
  };

当用户在移动demo节点的时候，监听横坐标的滑动距离
function touchmove(event) {
    let endX = event.touches[0].pageX,
        endY = event.touches[0].pageY,
        diffX = endX - this.startX,
        diffY = endY - this.startY,
        temp = this.x + diffX;

    if (Math.abs(diffY) > Math.abs(diffX)) return;

    if (temp > 0) {
        temp = 0;
    } else if (temp < minX) {
        temp = minX;
    }
    this.x = Math.round(temp)
    this.setTransform(this.x)
    this.startX = endX
}
通过用户移动的距离与设定按钮宽度的一半作比较，即minX/2,
当用户touchEnd时移动横坐标距离x < minX/2，则回弹到原始位置
当用户touchEnd时移动横坐标距离x > minX/2，则在该demo节点添加一个样式属性'data-touchmove-active'，并且将该demo左滑置按钮的最大宽度，此时左滑成功，然后在改按钮
添加相应的事件（删除，关注，取消关注等）
function touchend(event) {
    if (this.x < minX / 2) {
        this.x = minX;

        if (!this.el.dataset.touchmoveActive) {
            this.removeActive();
            this.el.dataset.touchmoveActive = true;
        }
        this.el.classList.add('test');
    } else {
        this.x = 0;
        this.el.removeAttribute('data-touchmove-active');
    }
    this.setTransition();
    this.setTransform(this.x);
}

上述则是完整的指令执行顺序，下面我们看看页面绑定指令

我们在注册指令的时候，有注册LeftMove这个指令，所以我们直接在页面需要左滑删除的demo节点绑定v-leftMove即可，
然后有人就会问，为什么页面会的demo上有v-leftMove="{container: '[data-touchmove-con]'}"这么一段代码，其实这里是指定该指令只监听data-touchmove-con这个集合
中所绑定v-leftMove的元素。

此处就介绍完该指令的使用方法了，有不到之处，忘见谅！