vue swipeCell滑动单元格(仿微信)的实现示例

this.$emit('open', {
    position,
    name: this.name,
    // @deprecated
    // should be removed in next major version
    detail: this.name,
   });
  },

// @exposed-api
  close(position) {
   this.offset = 0;

if (this.opened) {
    this.opened = false;
    this.$emit('close', {
     position,
     name: this.name,
    });
   }
  },

onTouchStart(event) {
   if (this.disabled) {
    return;
   }
   this.startOffset = this.offset;
   this.touchStart(event);
  },

range(num, min, max) {
   return Math.min(Math.max(num, min), max);
  },

preventDefault(event, isStopPropagation) {
   /* istanbul ignore else */
   if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    event.preventDefault();
   }

if (this.isStopPropagations) {
    stopPropagation(event);
   }
  },

stopPropagations(event) {
   event.stopPropagation();
  },

onTouchMove(event) {
   if (this.disabled) {
    return;
   }
   this.touchMove(event);
   if (this.direction === 'horizontal') {
    this.dragging = true;
    this.lockClick = true;
    const isPrevent = !this.opened || this.deltaX * this.startOffset < 0;
    if (isPrevent) {
     this.preventDefault(event, this.stopPropagation);
    }
    
    this.offset = this.range(
     this.deltaX + this.startOffset,
     -this.computedRightWidth,
     this.computedLeftWidth
    );
    //增加弹性
    if(this.computedRightWidth && this.offset === -this.computedRightWidth || this.computedLeftWidth && this.offset === this.computedLeftWidth){
     //
     this.preventDefault(event, this.stopPropagation);
     //弹性系数
     this.elasticX = (this.deltaX + this.startOffset - this.offset)/4;
    }
   }else{
    //上下滑动后取消close
    this.dragging = true;
    this.lockClick = true;
   }
  },

onTouchEnd() {
   if (this.disabled) {
    return;
   }
   //回弹
   this.elasticX = 0
   if (this.dragging) {
    this.toggle(this.offset > 0 ? 'left' : 'right');
    this.dragging = false;
    // compatible with desktop scenario
    setTimeout(() => {
     this.lockClick = false;
    }, 0);
   }
  },

toggle(direction) {
   const offset = Math.abs(this.offset);
   const THRESHOLD = 0.15;
   const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
   const { computedLeftWidth, computedRightWidth } = this;

if (
   computedRightWidth &&
   direction === 'right' &&
   offset > computedRightWidth * threshold
   ) {
    this.open('right');
   } else if (
   computedLeftWidth &&
   direction === 'left' &&
   offset > computedLeftWidth * threshold
   ) {
    this.open('left');
   } else {
    this.close();
   }
  },

onClick(position = 'outside') {
   this.$emit('click', position);

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!