微信小程序-uniapp-切换tab时数据列表如何切换？

如图：

这里有两个tab，要保证每次切换后列表保持不变，就必须在运行时要有两个持久化的数据源，每个tab是一个列表，让我们来设计一下这样的数据结构。

首先我们的数据结构是这样的：

体现在vue的data是这样的：

正好对应tab的索引，当tab改变时，tab会回调索引：

模版中则动态切换使用的数据源：

总结就是：tab默认索引为0，点击另一个tab时，在回调中改变当前data的subsection_current为回调的index，这样模版就能动态切换数据源了。

解决了动态切换数据源的问题，我们再讨论下如何页面滑动切换tab，我这里使用的是swiper组件。

首先我会默认初始tab个数的swiper组件到页面：

每个swiper组件内嵌了一个瀑布流组件，这个组件原是uniapp插件市场下载的，但是有一些问题，首先不能一次性加载多张图片，而是需要一张图片加载完成才能加载下一张图片，我在此基础上改进后，可以一次性加载一页的全部图片，并且扩展了一些自己的需求，基本上算重构了。

瀑布流的原理就是布局为两列或者多列，每页数据轮流放到每一列中，如第一次是第一列，那么第二次就放到第二列，依次类推。

我在swiper组件上有一个动态设置height的代码，这是因为swiper的高度需要是固定的一个值，也可以动态改变，我就会在每次分配数据到瀑布流的列之后计算一下两列的高度，返回最高一列的高度到父组件，再动态设置到swiper上。

附上瀑布流动态分配代码以及获取高度并重新分配、回调高度重新设置swiper高度的代码。

首先是初次初始化瀑布流组件时：

handleViewRender函数方法体代码如下：

关键的获取下一次需要分配数据到那列的方法以及获取最高一列高度的代码如下：

获取瀑布流中最高一列的高度：

我们再回到handleViewRender方法，每次分配数据到列都会emit一次高度信息：

我们看看父组件是如何接受和处理通知的：

处理的方法很简单，只是重新计算下每个tab的高度而已：

为啥这里还多加了一个this.swpier_bottom_height呢？

因为emit的高度可能不够，所以额外多加点高度撑起来，我这边设置的高度为：

我们再回首看看swiper的:style：

当某个tab内容发生改变时，瀑布流组件就会通知父组件，父组件再更改每个数据源中tab索引对应的height即可，这样就能实现动态设置swiper高度了。

不错，到这里这个页面已经完成了切换tab时可以动态切换数据源的问题，高度也会自动重新设置，但是。。又一个新问题出现了，因为每个tab下的页面都是需要向下滚动的，比如tab1滚动了1000px的距离，但我没有操作tab2的页面，理应tab2的页面是没有滚动的，但实际是tab2的滚动距离也是1000px，追其根由就是两个tab的滚动距离没有独立出来。

所以我们又需要将每个tab的滚动高度也独立出来，和每个tab有独立的数据源一样，滚动距离也是每个tab独有的，我是这么设计数据结构的：

再多加一个字段单独记录每个tab的滚动记录，如tab1滚动了500px，tab2滚动了1000px，我切换到tab1时，设置滚动距离为500，切换到tab2时，设置滚动距离为1000px，理论的思路如上，我们进入代码部分：
滚动我使用了z-paging组件，这个组件提供了相当丰富的扩展，基本满足上拉加载、下拉刷新的全部需求了：

处理每次滚动时的回调：

直接设置每个数据源的滚动距离，设置完以后当切换tab时再动态设置为不同当前tab索引的滚动距离即可：

z-paging也提供了相应方法可以直接滚动到相应的位置。

OK，到这里我们完成了点击或者左右滑动时都能切换tab，以及切换到不同tab时不同的数据源、每个tab下数据加载时动态设置swiper高度、瀑布流自动依次分配数据到不同列的整体完整需求。

大家可以微信搜索：《一方云知》体验一下上述的功能，因为我的后端是如果半个小时内没有访问的话自动关机的，所以大家遇到页面一只loading的话，可能等待1-2分钟即可启动了。

该功能路径：打开小程序->精选图片。

这篇分享文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。

想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。

感谢你的阅读与支持，期待在未来的文章中与你再次相遇！

我的微信公众号：【xdub】，欢迎大家订阅，我会同步文章到公众号上。