vant组件库SwipeCell增加点击不触发功能

组件地址:

点击

SwipeCell 滑动单元格介绍

他是一个封装好的组件,当手指往左滑动的时候,调出右边的菜单,往右滑时调出左边的菜单.

用法除了官网提供的基本写法,还可以通过slot插入自定义的元素用于内容显示.

这里就会遇到一个问题,如果我们滑动的内容里面有一个click的事件用于进入到下一个页面.

当单元格处于拉开的状态,也就是左右有单元格滑动了,点击时依旧会触发click事件,但是已QQ为例,qq在左右拉开的时候,点击只会让拉开的元素还原,并不会触发click事件,所以我们要解决这个问题.

解决问题

由于click是由我们自己写的元素触发,click事件也是我们自己写的,所以操作上就很方便了,首先我们在vue的data里创建一个开关属性

 data() {
     return {
         offClick: false //关闭进入路由点击事件
     };
 }

SwipeCell没有提供判断拉开的状态事件,所以我们要自己写,首先给SwipeCell组件加入一个ref属性,用于获取所有的滑动单元格.

<van-swipe-cell ref="featuresList">
</van-swipe-cell>

然后,给click事件的元素再增加两个事件,分别为touchstart和mousedown,用于在click触发前就判断完单元格的状态.

<template slot="default">
    <div
      @click="touchstartFn(item)"
      class="content-item"
      @touchstart="ifOffClick"
      @mousedown="ifOffClick"
    >
    </div>
</template>

两个事件都绑定同一个函数,分别对应电脑端和手机端判断,函数内容如下:

ifOffClick() {
    let lists = this.$refs.featuresList,
        len = lists.length - 1;
    while (lists[len]) {
        if (lists[len--].offset !== 0) {
            this.offClick = true;
            return;
        }
    }
}

首先获取到所有的单元格集合lists ,然后while从后到前循环,如果对应的featuresList元素的offset的值大于或者小于0,表示未拉开状态,我们将this.offClick设置为true,表示为拉卡状态.

这个方法丢入vue的methods中去.

然后就是事件触发判断了,touchstartFn事件如下:

ouchstartFn(data) {
      if (!this.offClick) {
       //要实际运行的代码,保密不写       
      } else {
        this.offClick = false;
      }
    }

当this.offClick为true时我们不能运行实际要运行的代码,所以进行一次求反,然后else触发.

else这个阶段我们要想一下,我们点击的时候滑动单元格实际会自动还原的,这是组件自带的功能,拉开时,点击任何地方都会触发还原效果,我们的ouchstartFn触发也会产生还原效果,此时我们已经跳过了实际要运行的代码,不会触发进入下一个路由界面,单元格都还原了,我们就应该将this.offClick 设置为false.让他初始化.

此时就可以达到拉开时不触发click事件了.

流程如下:

未拉开状态:
click点击------touchstart/mousedown触发----遍历featuresList元素----offset都为0---offClick不改动,为初始false------click事件里面if判断---求反----触发进入下一个路由

拉开状态:
click点击------touchstart/mousedown触发----遍历featuresList元素----有的元素offset不为0-----跳出循环并将offClick设置为true-------click事件判断-----if求反不触发本次进入路由-----offClick初始化,下次点击如果没有拉开的元素将触发进入下一个路由