Vue 组件之道：巧用滚动居中 Tab 组件打造流畅导航体验

2024-01-20 09:43:23

在现代 Web 开发中，Tab 组件已经成为一种不可或缺的 UI 元素，它可以帮助用户在不同页面或内容之间快速切换。而当 Tab 组件具备滚动居中功能时，它更是锦上添花，可以为用户带来更加流畅美观的导航体验。

滚动居中 Tab 组件的优势

滚动居中 Tab 组件相较于普通 Tab 组件具有以下优势：

视觉美感： 当用户点击某个 Tab 项时，该 Tab 项会自动滚动居中，视觉上更加美观，也更符合用户的使用习惯。
流畅交互： 滚动居中 Tab 组件可以与其他 UI 元素协同工作，实现流畅的交互效果。例如，当用户点击某个 Tab 项时，该 Tab 项的内容也会自动滚动到顶部，为用户提供更加直观、流畅的操作体验。
灵活性： 滚动居中 Tab 组件可以适应不同宽度的屏幕尺寸，在不同设备上都能保持美观和可用性。这对于响应式 Web 设计非常重要。

实现滚动居中 Tab 组件

在 Vue.js 中实现滚动居中 Tab 组件的方法有很多，本文将介绍一种简单易用的方法。首先，我们需要创建一个名为 Tab.vue 的组件，代码如下：

<template>
  <div class="tab-container">
    <ul class="tab-list">
      <li v-for="tab in tabs" :key="tab.id" @click="changeTab(tab.id)">
        <a :href="tab.href">{{ tab.title }}</a>
      </li>
    </ul>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeTabId: null
    };
  },
  methods: {
    changeTab(id) {
      this.activeTabId = id;
      this.$refs.tabContent.scrollTo({ left: this.$refs.tabContent.scrollWidth * (id - 1), behavior: 'smooth' });
    }
  },
  mounted() {
    this.changeTab(this.tabs[0].id);
  },
  render(h) {
    return h('div', { class: 'tab-component' }, [
      h('ul', { class: 'tab-list' }, this.tabs.map(tab => h('li', { key: tab.id, class: { 'active': this.activeTabId === tab.id } }, [
        h('a', { href: tab.href }, tab.title)
      ]))),
      h('div', { class: 'tab-content', ref: 'tabContent' }, [
        h('slot')
      ])
    ]);
  }
};
</script>

<style>
.tab-component {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-list {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tab-list li {
  flex: 1;
  text-align: center;
  padding: 10px;
  margin: 0;
}

.tab-list li a {
  text-decoration: none;
  color: #333;
}

.tab-list li.active a {
  color: #fff;
  background-color: #007bff;
}

.tab-content {
  flex: 1;
  overflow-x: auto;
}
</style>

在上述代码中，我们定义了一个名为 Tab.vue 的 Vue.js 组件。该组件接收一个名为 tabs 的 prop，它是一个包含 Tab 项信息的数组。每个 Tab 项包含三个属性：id、href 和 title。id 属性是 Tab 项的唯一标识符，href 属性是 Tab 项的链接地址，title 属性是 Tab 项的标题。

在 Tab.vue 组件的 methods 中，我们定义了一个名为 changeTab 的方法。该方法用于切换当前激活的 Tab 项。当用户点击某个 Tab 项时，该方法会被触发，并将当前激活的 Tab 项的 id 传递给该方法。然后，该方法会通过调用 $refs.tabContent.scrollTo 方法来滚动 Tab 项的内容区域，使当前激活的 Tab 项居中显示。

在 Tab.vue 组件的 mounted 钩子中，我们调用 changeTab 方法来激活第一个 Tab 项。这确保了在组件首次渲染时，第一个 Tab 项是激活状态。

在 Tab.vue 组件的 render 方法中，我们使用 h 函数来渲染组件的模板。模板包含一个包含 Tab 项列表的 ul 元素和一个包含 Tab 项内容的 div 元素。Tab 项列表使用 v-for 指令来遍历 tabs prop，并为每个 Tab 项生成一个 li 元素。li 元素中包含一个 a 元素，该 a 元素的 href 属性绑定到 Tab 项的 href 属性，a 元素的内容是 Tab 项的 title 属性。Tab 项内容 div 元素使用 ref 指令来引用，以便在 mounted 钩子中使用 $refs.tabContent.scrollTo 方法来滚动 Tab 项的内容区域。