Vant 提供了一系列的导航组件,用于构建移动端应用的导航栏、标签栏等。以下是几个常见的 Vant 导航组件的简单示例:

1. Tab 标签栏
<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="标签一">内容一</van-tab>
      <van-tab title="标签二">内容二</van-tab>
      <van-tab title="标签三">内容三</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, // 当前选中的标签索引
    };
  },
};
</script>

2. NavBar 导航栏
<template>
  <div>
    <van-nav-bar
      title="导航栏"
      left-text="返回"
      @click-left="onClickLeft"
      right-text="按钮"
      @click-right="onClickRight"
    />
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      console.log('点击了返回按钮');
    },
    onClickRight() {
      console.log('点击了右侧按钮');
    },
  },
};
</script>

3. Sidebar 侧边导航
<template>
  <div>
    <van-sidebar v-model="active" :items="items" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, // 当前选中的导航项索引
      items: [
        { text: '导航项一' },
        { text: '导航项二' },
        { text: '导航项三' },
      ],
    };
  },
};
</script>

这只是 Vant 导航组件的简单示例,实际上 Vant 还提供了很多其他导航相关的组件,如 Tabbar 标签栏、Grid 宫格、Steps 步骤条等。你可以根据项目的需求选择合适的导航组件进行使用。

确保已正确安装和引入 Vant,以及按照文档进行配置。


转载请注明出处:http://www.zyzy.cn/article/detail/5693/Vant