feat(navigation): 更新底部导航栏样式

- 替换静态图片图标为 vant 组件图标
- 调整导航项的样式和结构
- 添加 activeTab 数据属性用于测试
- 注释掉部分冗余代码
This commit is contained in:
du.meimei
2025-05-19 20:04:02 +08:00
parent 669104e477
commit bf2daab092

View File

@@ -12,15 +12,17 @@ const navigation = ref([
name: 'home', name: 'home',
path: '/home' path: '/home'
}, },
icon: '/tabbar/home.png' // icon: '/tabbar/home.png',
icon: 'home-o',
inactive:''
}, },
{ {
title: '伊调研', title: '伊调研',
link: { // link: {
name: 'home', // name: 'home',
path: '/home' // path: '/home'
}, // },
icon: '/tabbar/yl.png' // icon: '/tabbar/yl.png'
}, },
{ {
title: '我的', title: '我的',
@@ -28,7 +30,8 @@ const navigation = ref([
name: '', name: '',
path: '/survey' path: '/survey'
}, },
icon: '/tabbar/mine.png' icon:'friends-o',
// icon: '/tabbar/mine.png'
} }
]); ]);
@@ -57,11 +60,13 @@ watch(activeTab, (value: string) => {
<template> <template>
<div class="navigation"> <div class="navigation">
{{activeTab}}
<van-tabbar v-model="activeTab"> <van-tabbar v-model="activeTab">
<van-tabbar-item v-for="item in navigation" :key="item.title" :name="item.title"> <van-tabbar-item v-for="item in navigation"
<template #icon> :icon="item.icon" :key="item.title" :name="item.title">
<img :src="item.icon" /> <!-- <template #icon="props">-->
</template> <!-- <img :src="props.active ? icon.icon : icon.inactive" />-->
<!-- </template>-->
{{ item.title }} {{ item.title }}
</van-tabbar-item> </van-tabbar-item>
</van-tabbar> </van-tabbar>