关于前端:移动端滑动tab和table同时存在会引发什么问题

上周上线了一个小的 webapp 我的项目，技术栈次要是 vue2 + echarts + vant2 + vue-easytable，这里重点总结一个 vue-easytable 和 滑动 tab 碰撞一起产生的问题。为了不便形容，下文会将 vue-easytable 简称为 table。

首先展现下成果：

 留神看，第一下是触摸到表格上的，所以表格失常滑动，第二下是触摸到表格下方的，所以 tab 标签页滑动了。

上面来剖析下：

在挪动端想要实现滑动 tab，vant2 的 tab 标签页组件就自带一个滑动属性 swipeable，只有加到 van-tabs 组件标签上即可实现了。

然而有的 tab 标签页是存在表格的，那么就要用到 table 组件。所以就呈现了如题的问题，这里进展几秒思考下，怎么保障滑动表格和滑动 tab 互不影响？

碰到这个问题，我的第一反馈就是如果触摸到表格上就禁止滑动 tab，否则就容许滑动 tab。

外围步骤如下：

1. 监听 body 的 touchstart 事件
2. 事件回调函数中拿到一个触摸节点的惟一标识
3. 依据这个惟一标识是否蕴含于 table 组件中，来动静更改 swipeable 的值

具体代码如下：

 因为有好几个标签页都有表格，所以为了不便保护，将外围代码写在一个 `mixin` 文件外面，而后每个标签页引入并执行，这样就不必每个标签页都定义一个 swipeable 变量了。

// commonMixin.js
export default {data() {
        return {mixinSwipeable: true}
    },
    methods: {mixinSwipeableHandler(){const myBody = document.getElementsByTagName('body')[0]
            myBody.addEventListener('touchstart', (e) => {console.log('isTouchTable', isTouchTable(e));
                this.mixinSwipeable = !isTouchTable(e)
            }, false)

            // 判断触摸的节点是否在表格内
            function isTouchTable(e) {
                const touchDomClassName = e.target.className
                console.log('touchDomClassName', touchDomClassName);
                // 依据 log 信息得出，触摸到表格节点元素的次要状况有三种，// 别离是表头，表格行，列头，它们的节点类名都是以 ve-table 结尾的
                // 这里或者有更适合的判断办法，只是目前没有发现 bug 哈哈
                return touchDomClassName.includes('ve-table')
            }
        }
    },
}

 而后就是在 van-tabs 组件标签上加上 :swipeable=“mixinSwipeable”，并引入这个 commonMixin.js 文件，最初在 mounted 外面执行 mixinSwiperableHandler 办法就能够了。

这里补充几点：

1. mixin 文件里的变量和函数后面加上 mixin 前缀，是为了一眼就能看出这个变量和办法是 mixin 里的，当然也就须要多敲几个字母，不免显得多余，或者有更好的形式能解决这个问题。不过话说回来，如果不这样命名，组件里全局搜寻不到的变量和办法，就要看下是否引入了 mixin 文件了。最初，切记 mixin 是一把双刃剑，不倡议滥用。2. 其实这个滑动 tab 的需要不是产品要求的，是测试私下提出来的，而且也没有强制要求肯定要做，对整个我的项目而言算是精益求精。从他提出需要到实现需求花了将近一个小时，虽说代码只有短短几行，然而思路才是最重要的。

最初

这几天还有一点思考，当触摸到的表格没有滚动条或者曾经滑到左右两端时，批改 mixinSwipeable 变量为 true，这样就能够间接滑动到下一个 tab 标签页了。欢送在评论区留言。

文笔无限，如果有没有表述分明的，还请多多包涵，有谬误的中央，万望告知，有什么疑难和倡议，能够多多交换。