加入收藏 | 设为首页 | 会员中心 | 我要投稿 惠州站长网 (https://www.0752zz.com.cn/)- 办公协同、云通信、物联设备、操作系统、高性能计算!
当前位置: 首页 > 站长百科 > 正文

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

发布时间:2020-10-30 18:16:48 所属栏目:站长百科 来源:网络整理
导读:副标题#e# 短视频,自媒体,达人种草一站服务 这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 抽离Vant weapp滑

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;
   }
  },

(编辑:惠州站长网)

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

推荐文章
    热点阅读