同页面中，使用多个瀑布流布局。tab切换时，会重新绘制列表

[iOreon]

QQ2024929-155239.mp4

页面中tab切换会导致重排列表，无法记录上次滑动页面滑动的位置。这种有没有好的处理方式呢

[heikaimu]

可以配合better-scroll这个插件记录每次滚动的位置，然后回去的时候，再滚回去。

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 2024年9月29日(星期天) 下午3:57 收件人: ***@***.***>; 抄送: ***@***.***>; 主题: [heikaimu/vue3-waterfall-plugin] 同页面中，使用多个瀑布流布局。tab切换时，会重新绘制列表 (Issue #77) https://github.com/user-attachments/assets/65d65a70-caf9-42a0-8e9e-97c563c45d73 页面中tab切换会导致重排列表，无法记录上次滑动页面滑动的位置。这种有没有好的处理方式呢 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[iOreon]

原因应该是因为切换tab时，页面重排列表重新渲染了。这里可以优化吗，不想让他整个列表重排。

[heikaimu]

如果你的tab是if逻辑，组件销毁了，肯定会重新排列的。

[iOreon]

没有哦，我特意用了v-show的处理方式来渲染对应的组件，就是不想刷新页面。

[heikaimu]

你可以看我example里面，点击外面的卡片，会弹出来一个侧边子列表弹窗。这个弹窗关闭之后，再次打开，还是之前的状态。这个侧边栏用的element的组件。你可以研究下。

[heikaimu]

我更新了一个example，就用的show做的tab切换。你看看，我这边是可以记录位置的。

[iOreon]

你的demo我都看了一遍，没发现有什么用法比较特别的地方呀。我的用法跟你差不多，只是传递的options没有你写的这么多。没明白问题到底出在哪里，我是用的vant的移动端tab切换组件，难道跟这个有关吗？但是我也研究了，vant的tab切换也只是通过display来控制当前tab的显示和隐藏，按理说不会导致组件重新渲染呢
附上我做的h5链接，麻烦看一下：https://testmobile.51wnl-cq.com/jxzx2024/#/?DONTURLENCODE=[DONTURLENCODE]

[iOreon]

会不会是因为每个tab板块的从后端获取的数据量不一样，传递给Waterfall的list不一致，然后整个waterfall-list的高度不一致，从而触发了重排

[heikaimu]

我的tab比你多一层，并且我内层用的absolute定位的方式。