0%

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

发布于 / 分类: vue 项目实战 / 暂无评论 / 阅读量 83

最后更新于 2019年11月29日

组件地址:

点击

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初始化,下次点击如果没有拉开的元素将触发进入下一个路由

vue.js项目实战第二章的错误 vant组件ImagePreview 遇到的一个问题
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao