Vant 3 #Tab标签页 #scrollspy滚动导航模式下手动修改active时无法滚动到指定的内容页问题

van-tabs 左右切换时是可以通过修改active的值来实现内容的切换；

<template>
  <Tabs
    ref="tabs"
    @click-tab="handleTab"
    @scroll="handleScroll"
    v-model:active="activeName"
    sticky
    lazy-render
  >
    <!-- scrollspy -->
    <Tab v-for="item in use.arr" :title="'选项 ' + item.name" :name="item.name">
      <div>-------------------------------------------</div>
      <div style="height: 300px">内容 {{ item.name }}</div>
    </Tab>
  </Tabs>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { Tab, Tabs } from "vant";
const use = reactive({
  arr: [
    { id: 11, name: "a" },
    { id: 12, name: "b" },
    { id: 13, name: "c" },
    { id: 14, name: "d" },
    { id: 15, name: "e" },
    { id: 16, name: "f" },
  ],
});

// 通过设定初始值或者手动赋值的方式来来实现内容的切换
const activeName = ref("e");
// activeName.value = "c";

但是添加scrollspy属性将tab改为滚动导航模式后 ，直接修改active只有标签导航会切换而内容则无法实现切换；

解决方案：

通过 ref 获取到 Tabs 实例并调用实例方法scrollTo 进行内容切换（滚动导航模式可用）

代码：

<template>
  <Tabs
    ref="tabs"
    @click-tab="handleTab"
    v-model:active="activeName"
    sticky
    scrollspy
    lazy-render
  >
    <Tab v-for="item in use.arr" :title="'标签 ' + item.name" :name="item.name">
      <div>-------------------------------------------</div>
      <div style="height: 300px">内容 {{ item.name }}</div>
    </Tab>
  </Tabs>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { Tab, Tabs } from "vant";
const use = reactive({
  arr: [
    { id: 11, name: "a" },
    { id: 12, name: "b" },
    { id: 13, name: "c" },
    { id: 14, name: "d" },
    { id: 15, name: "e" },
    { id: 16, name: "f" },
  ],
});

const activeName = ref(null);

const tabs = ref(null);

onMounted(() => {
  nextTick(() => {
    // 通过 ref 获取到 Tabs 实例并调用实例方法实现
    tabs.value.scrollTo("c");
  });
});
function handleTab(event) {
  console.log(event);
}
</script>