在VueJS/VuetifyJS中复刻WhatsApp标签页滑动切换效果

我之前在做Vuetify项目复刻WhatsApp安卓版标签页效果时，也遇到过和你一模一样的问题——默认的v-tabs滑动切换时，得等滑动完全结束才会显示新标签的内容，完全达不到WhatsApp那种滑动过程中就能看到目标页内容的流畅感。

后来我试了不少方案，发现Flickity这个库完全能解决这个需求，它的拖拽滑动机制天生支持实时展示相邻面板的内容，刚好匹配我们要的效果。下面是具体的实现步骤：

实现步骤 #

1. 安装Flickity #

首先通过包管理器安装Flickity：

npm install flickity
# 或者用yarn
yarn add flickity

2. 改造Vuetify标签页结构 #

我们需要把Vuetify原生的标签内容区域替换成Flickity的滑动容器，同时保持标签栏的交互逻辑和滑动容器同步：

<template>
  <div class="tab-container">
    <!-- 保留Vuetify的标签栏 -->
    <v-tabs v-model="activeTab" @change="syncTabToCarousel">
      <v-tab>聊天</v-tab>
      <v-tab>状态</v-tab>
      <v-tab>通话</v-tab>
    </v-tabs>

    <!-- Flickity滑动容器 -->
    <div ref="carousel" class="carousel">
      <div class="carousel-cell">
        <!-- 聊天标签内容 -->
        <v-card>
          <v-card-text>这里是聊天列表内容</v-card-text>
        </v-card>
      </div>
      <div class="carousel-cell">
        <!-- 状态标签内容 -->
        <v-card>
          <v-card-text>这里是状态更新内容</v-card-text>
        </v-card>
      </div>
      <div class="carousel-cell">
        <!-- 通话标签内容 -->
        <v-card>
          <v-card-text>这里是通话记录内容</v-card-text>
        </v-card>
      </div>
    </div>
  </div>
</template>

3. 编写逻辑代码 #

在组件中初始化Flickity实例，实现标签栏和滑动容器的双向同步：

<script>
import Flickity from 'flickity'

export default {
  data() {
    return {
      activeTab: 0,
      flickityInstance: null
    }
  },
  mounted() {
    // 初始化Flickity
    this.flickityInstance = new Flickity(this.$refs.carousel, {
      draggable: true,
      prevNextButtons: false, // 隐藏自带的前后按钮，用Vuetify的标签
      pageDots: false, // 隐藏分页点
      wrapAround: false, // 禁止循环滑动，和WhatsApp保持一致
      friction: 0.25 // 调整滑动阻力，更贴近原生APP的手感
    })

    // 监听Flickity的滑动切换，同步到Vuetify标签
    this.flickityInstance.on('change', (index) => {
      this.activeTab = index
    })
  },
  methods: {
    // 点击Vuetify标签时，同步滑动到对应的Flickity面板
    syncTabToCarousel() {
      this.flickityInstance.select(this.activeTab)
    }
  },
  beforeDestroy() {
    // 组件销毁时销毁Flickity实例，避免内存泄漏
    if (this.flickityInstance) {
      this.flickityInstance.destroy()
    }
  }
}
</script>

4. 添加基础样式 #

给滑动容器和面板添加必要的样式，确保布局正常：

<style scoped>
.tab-container {
  width: 100%;
  overflow: hidden;
}

.carousel {
  width: 100%;
}

.carousel-cell {
  width: 100%;
  padding: 16px;
}
</style>

效果说明 #

这样改造后，当你左右滑动内容区域时，就能像WhatsApp一样在滑动过程中实时看到相邻标签页的内容；点击标签栏的选项时，也会平滑滑动到对应的内容面板，完美复刻原生APP的交互体验。

内容的提问来源于stack exchange，提问作者Tom