一个table，两种套路：页面异动下使用滑动tab导致table混乱问题概述

很多人在做移动端项目的时候，大多都会选择使用滑动tab页的样式，来增加页面中的模块种类，丰富页面内容，使得页面能够承载更多的内容和功能。但是很多人并不知道的是，在移动端滑动tab的旁边，要使用table标签的时候，可能就会出现一些意想不到的“小惊喜”。那么，在移动端使用滑动tab的时候，都有哪些因素是我们需要额外注意的呢？

引入背景
上周公司上线了一个新的webapp项目，主要的目的，就是给一些公司的中小项目使用。设计要求其实比较简单，也就是给三个不同tab页，然后在每一个tab页中，都展示一个表。项目的技术栈主要是vue2、echarts、vant2和vue-easytable。整体看下来，这样的技术选型，其实并不算特别复杂，也没有太多的坑点。但是我们忽略了滑动tab和table同时存在的时候，可能存在的一系列问题，所以就导致了上线后出现了一些问题。

样式错乱和数据错位
因为是在开发完成之后才想到需要加一个滑动tab，所以这个滑动tab并不在最初的页面规划中。因此在设计页面的时候，并没有给滑动tab预留出来位置。而后来想要加一个滑动tab，就意味着整个页面的布局需要重新规划。这样带来的一个直接的问题就是，原先的样式就全部混乱了。比如说，table原本应该在页面中间的位置，现在滑动tab占用了页面中间的位置，table自然也就被挤到其他地方去了。更有可能的是，table可能会被整个挤到页面外，因为页面只能展示这么多，当table被其他元素挤出页面展示区域的时候，它就会被自动隐藏起来。

数据错位就更好解释了。在滑动tab这种样式中，切换tab页的时候，需要使用一些动画来使得这种切换更加平滑。但是在这个过程中，并不会立刻将原有的内容隐藏，然后再将新的内容展示出来。这样就导致了可能会有出现新的数据和原有数据交叉重叠的状况。而且，最糟糕的是，这两个内容的数据是不同的。这种情况，基本上就直接导致了数据错位，会让用户以为数据已经错误，其实只要切换tab页，就会恢复到正常的数据展示状态。

根本原因
那么为什么会出现样式混乱和数据错位的问题呢？根本原因就在于滑动tab和table所处的布局位置不兼容。滑动tab的本质，是一个左右滑动的容器。而table是一个表格数据展示的元素。这两个元素的布局方式是不同的。因此当它们同时存在的时候，就很容易出现布局冲突的情况。当这个冲突比较严重的时候，就会出现样式混乱和数据错位的问题。

解决方案
为了避免出现这种情况，我们可以使用以下几个解决方案：

1. 尽量不要在滑动tab的旁边使用table。
2. 如果一定要使用table，那么请确保table的宽度不超过滑动tab的宽度。
3. 在滑动tab和table之间添加一个间距，以防止它们互相重叠。

结语
希望这篇文章对您有所帮助。如果您在移动端开发中遇到任何问题，欢迎随时与我联系。