vue 实现tab贴合

实现Tab贴合的基本思路

在Vue中实现Tab贴合效果，通常需要结合动态组件和路由切换。Tab贴合指的是当用户滚动页面时，Tab栏会固定在页面顶部，方便用户随时切换内容。

使用vant组件库实现

安装vant库后，可以直接使用其Tab组件实现贴合效果：

npm install vant

在组件中引入Tab和Sticky组件：

import { Tab, Tabs, Sticky } from 'vant';
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky
  }
}

模板部分代码：

<van-sticky>
  <van-tabs v-model="active" sticky>
    <van-tab title="标签1">内容1</van-tab>
    <van-tab title="标签2">内容2</van-tab>
  </van-tabs>
</van-sticky>

自定义实现方法

如果不使用第三方库，可以通过监听滚动事件实现：

data() {
  return {
    isSticky: false,
    activeTab: 0
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const tabElement = this.$refs.tabContainer;
    const rect = tabElement.getBoundingClientRect();
    this.isSticky = rect.top <= 0;
  }
}

样式部分：

.sticky-tab {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

结合路由的实现方式

当需要Tab切换同时改变路由时：

watch: {
  activeTab(newVal) {
    this.$router.push({
      path: this.tabs[newVal].route
    });
  }
}

路由配置示例：

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 }
    ]
  }
]

性能优化建议

避免在scroll事件中执行过多计算，可以使用防抖函数：

import { debounce } from 'lodash';
methods: {
  handleScroll: debounce(function() {
    // 滚动处理逻辑
  }, 100)
}

对于移动端，考虑使用CSS的will-change属性提升性能：

.sticky-tab {
  will-change: transform;
}