VueJS 选项卡选择指示器在页面加载时移动

Posted 2023-02-23

【中文标题】VueJS 选项卡选择指示器在页面加载时移动

【英文标题】：VueJS tab selection indicator moves on page load

【发布时间】：2020-12-15 20:35:09

【问题描述】：

第一次重新加载页面时标签指示器向右移动很少，或者有时它会覆盖所有宽度，未选择为第二张图片

有时它会覆盖所有宽度，不是这样选择的。

但点击下图所示的任何选项卡后它都可以正常工作

【问题讨论】：

这是 CSS 问题。你能分享你的代码吗？ （codepen 或 jsfiddle）

仅在页面首次加载时才会发生，但在单击任何选项卡后效果很好。这是代码jsfiddle.net/jahanbabu/ogetrf2w

抱歉回复晚了。你能修好它吗？请在数据中设置 ntab:0。像 data() return ntab:0 ;

好的。如果可能，请评论/删除所有外部 css 代码/文件。然后再试一次。如果没有看到完整的代码，很难判断问题出在哪里。您可以创建一个简单的新项目并安装 vuetify 并再次测试。如果可能的话，你可以分享 github repo。所以我可以在本地测试。

如果这些技巧都不起作用，则创建一个问题github.com/vuetifyjs/vuetify/issues。也许有人已经面临这个问题。谢谢

【参考方案1】：

最后，我通过将 v-tabs 类从 centered-tabs 更改为 fixed-tabs 解决了这个问题。由于父视图也位于中心，因此问题可能出在中心类中。