组件地址:

点击

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 项目实战 标签： 暂无标签
版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。

评论

全部评论 13

  1. 郭
    郭
    Google Chrome Windows 10
    lists.length他为什么等于undefined啊，我打印出来 的undefined，没法取到长度，
    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 7
      @郭lists是ref="featuresList"的元素数组集合啊，你undefined自己看看为什么，你源码啥都没有
      回复
      1. 郭
        郭
        Google Chrome Windows 10
        @木灵鱼儿我就是完全复制的你的代码，什么都没改，还有一个问题，就是全屏的ios右滑返回，为什么会触发van-swipe-cell左滑的事件
        回复
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 7
          @郭那就很奇怪了，这个方法我去年年底才用了的，实现的逻辑你应该懂了吧，你可以尝试自己去写一个新的，我觉得可能是你的用法上出了问题，ios端的问题我就不知道了，我也没有ios设备，我记得ios自带这个手势导航，所以估计是冲突了吧
          回复
          1. 郭
            郭
            Google Chrome Windows 10
            @木灵鱼儿嗯，我给他换了一个事件@touchmove，然后自己定义了一个变量，ifOffClick()这个方法里面的一堆都没用到，就用到了this.offClick = true这个，判断他这个变量就好了
            回复
            1. 木灵鱼儿
              木灵鱼儿
              FireFox Windows 10
              @郭哈哈，我本来就是利用这个来做判断的，在click事件触发前判断是不是有cell格子滑动拉开
              回复
              1. 郭
                郭
                Google Chrome Windows 10
                @木灵鱼儿问你问题，就是ios X以上的手机，就是全屏，他右滑返回的时候会不会触发van-swipe-cell的right属性，就是会展开，我的会，不知道怎么解决，你有什么办法没
                回复
                1. 木灵鱼儿
                  木灵鱼儿
                  FireFox Windows 10
                  @郭没有设备，百度看看，我也不晓得啥情况
                  回复
                  1. 郭
                    郭
                    Google Chrome Windows 10
                    @木灵鱼儿百度找不到方法
                    回复
                    1. 木灵鱼儿
                      木灵鱼儿
                      FireFox Windows 7
                      @郭（￣▽￣）那open方法触发吗？
                      回复
                      1. 郭
                        郭
                        Google Chrome Windows 10
                        @木灵鱼儿不触发的话为什么会展开
                        回复
                        1. 木灵鱼儿
                          木灵鱼儿
                          FireFox Windows 7
                          @郭既然open能够触发，那就自己判断iosx设备的情况下，判断滑动单元格的transform: translate3d();，x轴的值，无非就是正负0三个
                          回复
  2. 郭
    郭
    Google Chrome Windows 10
    lists.length他为什么等于undefined啊，我打印出来 的undefined，没法取到长度，
    回复

相关推荐

暂无相关推荐
获得点赞 0
文章被阅读 13,733
最后更新 19-11-29 14:43:59

目录

目录