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