feat(navigation): 更新底部导航栏样式
- 替换静态图片图标为 vant 组件图标 - 调整导航项的样式和结构 - 添加 activeTab 数据属性用于测试 - 注释掉部分冗余代码
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user