写一个 Tabbar 底部导航栏 组件可以应用于其他页面 vue2 uviwe数据tabbarList: [ { id: 0, path: 'pages/tab/order/index', icon: 'static/orderDefault.png', selectIcon: 'static/orderPress.png', text: '订单', centerItem: false }, { id: 1, path: 'pages/tab/quckBilling/quickBilling.vue', icon: 'static/userDefault.png', selectIcon: 'static/userPress.png', text: '快速开单', // 通过类名class控制样式大小 centerItem: true }, { id: 2, path: 'pages/tab/mine/mine', icon: 'static/userDefault.png', selectIcon: 'static/userPress.png', text: '我的', centerItem: false } ]
时间: 2024-04-12 09:31:40 浏览: 11
你可以使用以下代码示例创建一个可以应用于其他页面的 Tabbar 底部导航栏组件:
```vue
<template>
<div class="tabbar">
<router-link v-for="tab in tabbarList" :key="tab.id" :to="tab.path" class="tabbar-item">
<img :src="tab.icon" :class="{ active: currentPath === tab.path }" alt="">
<span :class="{ active: currentPath === tab.path }">{{ tab.text }}</span>
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
tabbarList: [
{
id: 0,
path: 'pages/tab/order/index',
icon: 'static/orderDefault.png',
selectIcon: 'static/orderPress.png',
text: '订单',
centerItem: false
},
{
id: 1,
path: 'pages/tab/quckBilling/quickBilling.vue',
icon: 'static/userDefault.png',
selectIcon: 'static/userPress.png',
text: '快速开单',
centerItem: true
},
{
id: 2,
path: 'pages/tab/mine/mine',
icon: 'static/userDefault.png',
selectIcon: 'static/userPress.png',
text: '我的',
centerItem: false
}
],
currentPath: ''
};
},
created() {
this.currentPath = this.$route.path;
}
};
</script>
<style>
.tabbar {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f5f5f5;
height: 60px;
}
.tabbar-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: #999999;
}
.tabbar-item img {
width: 24px;
height: 24px;
}
.tabbar-item span {
font-size: 12px;
}
.tabbar-item .active {
color: #007aff;
}
</style>
```
将上述代码保存为一个名为 `Tabbar.vue` 的组件文件,然后在其他页面中引入该组件并使用即可。请注意,你可能需要根据自己的项目配置进行一些调整,比如路由配置和样式等。