木灵鱼儿
阅读:9087
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初始化,下次点击如果没有拉开的元素将触发进入下一个路由
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

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