tab标签栏下划线位置错位问题彻底解决

前端

2023-11-03 13:09:19

修复 Vanta 中 Tab 栏下划线错位问题

问题概述

在使用 Vanta 2 中的 Tab 栏组件时，您可能会遇到下划线与标签不一致的情况，如下图所示：

[图片：下划线与标签错位示例]

原因分析

这个问题通常是由 v-show 指令造成的。v-show 会动态显示或隐藏元素，但在元素显示时并不会触发浏览器的重绘。这会导致下划线位置错误。

解决方案

1. 使用 Resize 重绘

一种解决方法是调用 Tab 栏组件中的 resize 重绘方法，强制浏览器重绘。

代码示例：

<template>
  <van-tabs v-model="activeName" @change="resize">
    <van-tab-pane name="tab1">标签 1</van-tab-pane>
    <van-tab-pane name="tab2">标签 2</van-tab-pane>
  </van-tabs>
</template>

<script>
import { Tab, TabPane } from 'vant';

export default {
  components: {
    [Tab.name]: Tab,
    [TabPane.name]: TabPane,
  },
  data() {
    return {
      activeName: 'tab1',
    };
  },
  methods: {
    resize() {
      this.$nextTick(() => {
        this.$refs.tabs.resize();
      });
    },
  },
};
</script>

2. 使用 v-if 指令

另一个解决方案是使用 v-if 指令替换 v-show 指令。v-if 会动态添加或删除元素，并触发浏览器的重绘。

代码示例：

<template>
  <template v-if="showTabs">
    <van-tabs v-model="activeName">
      <van-tab-pane name="tab1">标签 1</van-tab-pane>
      <van-tab-pane name="tab2">标签 2</van-tab-pane>
    </van-tabs>
  </template>
</template>

<script>
import { Tab, TabPane } from 'vant';

export default {
  components: {
    [Tab.name]: Tab,
    [TabPane.name]: TabPane,
  },
  data() {
    return {
      activeName: 'tab1',
      showTabs: true,
    };
  },
};
</script>