移动端开发巧用 vant4 PickerGroup 选择器组 完成功能tabs自动跳转开发

在移动端开发中，使用Vant 4的PickerGroup组件可以实现类似标签页的功能，并且在用户选择后能够自动进行页面跳转。以下是一个简单的实现示例：

<template>
  <van-picker-group v-model="activeTab" :columns="tabs" @change="onTabChange">
    <!-- PickerGroup内容 -->
  </van-picker-group>
</template>
 
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { PickerGroup } from 'vant';
 
export default {
  components: {
    PickerGroup,
  },
  setup() {
    const router = useRouter();
    const tabs = ref(['Tab1', 'Tab2', 'Tab3']);
    const activeTab = ref(0);
 
    const onTabChange = (value) => {
      // 根据选中的tab索引进行页面跳转
      const routeName = tabs.value[value].toLowerCase(); // 假设路由名称与tab名称一致
      router.push({ name: routeName });
    };
 
    return {
      tabs,
      activeTab,
      onTabChange,
    };
  },
};
</script>

在这个示例中，我们定义了一个tabs数组来存储标签页的名称，并使用PickerGroup组件来展示这些标签。通过监听change事件，我们在onTabChange方法中实现了当用户选择不同标签时自动进行页面跳转的功能。这里假设路由的名称与标签的名称相同，实际开发中可能需要一个映射表来确定正确的路由名称。