vue自定义tabbar
时间: 2023-09-13 15:07:25 浏览: 60
Vue中自定义Tabbar可以通过使用组件和样式来实现。以下是一个简单的示例:
首先,在你的项目中创建一个Tabbar组件,例如 `Tabbar.vue`:
```vue
<template>
<div class="tabbar">
<div class="tab" v-for="(tab, index) in tabs" :key="index" @click="navigate(tab.route)">
{{ tab.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ label: 'Tab 1', route: '/tab1' },
{ label: 'Tab 2', route: '/tab2' },
{ label: 'Tab 3', route: '/tab3' }
]
};
},
methods: {
navigate(route) {
// 在这里进行路由导航
this.$router.push(route);
}
}
};
</script>
<style scoped>
.tabbar {
display: flex;
justify-content: space-around;
background-color: #f2f2f2;
padding: 10px;
}
.tab {
cursor: pointer;
}
</style>
```
然后,你可以在你的App组件中使用这个Tabbar组件,例如 `App.vue`:
```vue
<template>
<div>
<router-view />
<Tabbar />
</div>
</template>
<script>
import Tabbar from './components/Tabbar.vue';
export default {
components: {
Tabbar
}
};
</script>
<style>
/* 全局样式 */
</style>
```
在这个示例中,我们使用了Vue的路由功能,通过`this.$router.push(route)`来实现点击Tab时的路由导航。你可以根据自己的需要进行修改和扩展,例如添加更多的Tab项或修改样式。
希望这个示例对你有帮助!如果你有任何问题,请随时问我。