上周启动了一个小型webapp项目。技术栈主要是vue2+echarts+vant2+vue-easytable。这里重点总结一个vue-easytable和slidingtab碰撞导致的问题。为了描述方便，vue-easytable将在下表中引用。先展示效果：注意第一次触摸在桌子上，所以桌子正常滑动，第二次触摸在桌子下面，所以标签页滑动。下面分析一下：如果想在移动端实现滑动tabs，vant2的tab标签页组件自带了一个sliding属性swipeable，在van-tabs组件标签中添加即可实现。但是有些标签页有表格，所以必须使用表格组件。于是就有了如题的疑问。在这里停顿几秒钟，想一想。如何保证滑动表和滑动标签互不影响？遇到这个问题，我的第一反应是触摸窗体禁止滑动tab，否则允许滑动tab。核心步骤如下：监听body的touchstart事件事件回调函数，得到一个触摸节点的唯一标识。根据表格组件是否包含唯一标识，动态改变swipeable的值。详细代码如下：因为Table有几个tab，所以为了维护方便，核心代码写在一个`mixin`文件中，然后每个tab页导入执行，这样就不用为每个标签页定义一个可滑动的变量。//commonMixin.jsexportdefault{data(){return{mixinSwipeable:true}},methods:{mixinSwipeableHandler(){constmyBody=document.getElementsByTagName('body')[0]myBody.addEventListener('touchstart',(e)=>{console.log('isTouchTable',isTouchTable(e));this.mixinSwipeable=!isTouchTable(e)},false)//判断触摸节点是否在表中functionisTouchTable(e){consttouchDomClassName=e.target.classNameconsole.log('touchDomClassName',touchDomClassName);//根据日志信息，表节点元素被触及主要有三种情况，//它们是表头，表行，列头，它们的节点类名都是以ve-table开头的//可能有一个这里判断的方式比较合适，不过目前还没发现bug哈哈returntouchDomClassName.includes('ve-table')}}},}然后就是在van-tabs中添加：swipeable="mixinSwipeable"到component标签，并导入这个commonMixin.js文件，最后在mounted中执行mixinSwiperableHandler方法就够了。这里有几点需要补充：1.在mixin文件中的变量和函数加上mixin前缀，这样一目了然，变量和方法都在mixin中。当然，你需要多打几个字母，难免显得多余，也许有更好的办法来解决这个问题。不过话虽如此，如果不这样命名，组件中无法全局查找到的变量和方法，要看是否引入了mixin文件。最后，记住mixin是一把双刃剑，不建议滥用。2.其实需要滑动tabs并不是产品需求，而是私测，并没有强制要求去做，对于整个项目来说是锦上添花。从提出需求到实现需求，他用了将近一个小时。代码虽然只有几行，但是思路是最重要的。最近这几天，我还有点小念头。当触摸到的表格没有滚动条或者已经滑动到左右两端时，修改mixinSwipeable变量为true，可以直接滑动到下一个标签页。欢迎在评论区留言。文笔有限，如有不明白的地方还请多多包涵，如有错误请多多指教，有什么问题和建议可以多多交流。
